Editable combo box

JavaScript
1

Is there any way to make a combo box(drop down list) in the HTML screen editable?
Like when i select an item in the combo box, a text box should appear in the place of combo with the item selected and once i am over with the editing the combo should reappear with the new value. I should also be able to add to new items to the combo box.

2

Modified from here.

[color=darkslategray]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

body {
	padding: 100px;
	background: url(http&#58;//www.sitepoint.com/forums/images/editor/code.gif);
}
#animals, option {
	font: normal 12px "comic sans ms", sans-serif;
	color: #000;
	background: buttonface;
}
span {
	padding: 12px;
	background: white;
}

</style>
<script type="text/javascript">

function addOption(s)
{
	var usr = 'option';
	if (s.value == 'other')
	{
		var o_new, o_old;
		var bullet = '• ';
		while (usr == '' || usr == 'option')
			usr = prompt('Enter a new animal...', 'option');
		if (null != usr)
		{
			var pos = s.selectedIndex;
			o_old = s.options[s.options.length - 2];
			o_new = document.createElement('option');
			o_new.setAttribute('value', usr);
			o_new.appendChild(document.createTextNode(bullet + usr[color=red].toUpperCase()[/color])); //remove red to maintain case
			s.insertBefore(o_new, o_old);
			s.selectedIndex = --pos;
			return true;
		}
	}
	if (!usr || s.value == 'spacer')
	{
		s.selectedIndex = 0;
		return false;
	}
}

</script>
</head>
<body>
<form>
<span>
<select id="animals" name="animals" onchange="return addOption(this)">
<option value="" selected="selected">&raquo; animals</option>
<option value="spacer"></option>
<option value="aardvark">• AARDVARK</option>
<option value="bullmoose">• BULL MOOSE</option>
<option value="catamount">• CATAMOUNT</option>
<option value="dachsund">• DACHSUND</option>
<option value="dachsund">• ELEPHANT</option>
<option value="spacer"></option>
<option value="other">&raquo; add animal</option>
</select>
</span>
</form>
</body>
</html>
[/color]