Editable combo box

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.

Modified from here.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

<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;

<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;

<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>