<script language="Javascript">

var

sel = "sel",

custom = "custom",

sDefault = "自定义";

var $ = {

// 显示自定义input

forInput : function() {

var oSel = document.getElementById(sel);

var oCus = document.getElementById(custom);

var iSel = oSel.options.selectedIndex;

var vSel = oSel[iSel].value;

if (vSel == sDefault) {

oSel.style.display = "none";

oCus.style.display = "";

oCus.focus();

}

},

// 显示带有自定义文本选项的select

forSel : function() {

var oSel = document.getElementById(sel);

var oCus = document.getElementById(custom);

oSel.style.display = "";

oCus.style.display = "none";

if (oCus.value.length == 0) {

return false;

}

for (var i = 0; i < oSel.length; i++) {

if (oSel[i].value == oCus.value) {

oSel[i].selected = true;

return false;

}

}

oSel.removeChild(oSel.lastChild); // 清除自定义选项

// 添加input的选项

var cSel = document.createElement("option");

cSel.value = oCus.value;

cSel.innerHTML = oCus.value;

cSel.selected = true;

oSel.appendChild(cSel);

// 补上自定义选项，确保该选项在末尾

cSel = document.createElement("option");

cSel.value = sDefault;

cSel.innerHTML = sDefault;

oSel.appendChild(cSel);

}

};

</script>

<select name="sel" onchange="$.forInput()">

<option value="选项一">选项一</option>

<option value="选项二">选项二</option>

<option value="自定义">自定义</option>

</select>

<input type="text" name="custom" size="10" maxlength="10" onblur="$.forSel()"/>