<select name=sel1></select><br><input id=item value=item>
<input type=button value=addItem onclick='with(document.all.sel1)options[length++].text=document.all.item.value'>
<input type=button value=addItem onclick='with(document.all.sel1)options[length++].text=document.all.item.value'>
<select name="s1"></select>
<input name="text1">
<input type=button onclick="addvalue()">
</form>
<script>
function addvalue()
{
var a=document.frm1.text1.value;
var obj = document.getElementById("s1");
//判断是否数据已经存在，如果存在就不加。
if (obj.length>0)
{for (var i=0;i<obj.length;i++)
{if (obj.options[i].text==a)
{ obj.selectedIndex =i
return false}
}
}
var optionvalue= new Option(a,a);
obj.add(optionvalue);
obj.selectedIndex = obj.options.length-1;
}
</script>
<Head>
<Title>
Example
</Title>
<Script Language="JavaScript">
<!--
function AddItem(TheList,ListValue,ListText) {
TheList.options[TheList.length]=new Option(ListValue,ListText);
}
-->
</Script>
</Head>
<Body>
<Select Id="List1">
<Option>ALL</Option>
</Select>
<Input Type="Button" Value="ADD" OnClick="AddItem(List1,'CHINA','CHINA')">
</Body>
</Html>
<head>
<title>可以编辑的下拉列表 - by WildWind<[email protected]>...</title>
<script language="JavaScript">
<!--
function catch_keydown(sel)
{
switch(event.keyCode)
{
case 13:
//Enter;
alert (sel.options[sel.selectedIndex].value);
sel.options[sel.length] = new Option("","",false,true);
event.returnValue = false;
break;
case 27:
//Esc;
alert("text:" + sel.options[sel.selectedIndex].text + ", value:" + sel.options[sel.selectedIndex].value + ";");
event.returnValue = false;
break;
case 46:
//Delete;
if(confirm("删除当前选项!?"))
{
sel.options[sel.selectedIndex] = null;
if(sel.length>0)
{
sel.options[0].selected = true;
}
}
event.returnValue = false;
break;
case 8:
//Back Space;
var s = sel.options[sel.selectedIndex].text;
sel.options[sel.selectedIndex].text = s.substr(0,s.length-1);
event.returnValue = false;
break;
}
}function catch_press(sel)
{
sel.options[sel.selectedIndex].text = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);
event.returnValue = false;
}function disp()
{
var str;
str = s1.options[s1.selectedIndex].value;
alert (str);
}
//-->
</script>
</head><body onload="s1.focus();">
<h3>操作方法:</h3>
<p>
1.按Enter键开始添加输入新的选项...<br>
2.按Del键删除当前选项...<br>
3.按Esc键查看当前选项的text和value值...<br>
4.按BackSpace键删除当前选项的前一个字符...<br>
</p>
<h3>测试结果:</h3>
<p>
1.IE6.0测试通过...<br>
</p>
<br>
<h3>建议&意见:</h3>
<p>
1.大家可以做成htc,将这些函数绑在css上(很简单,不再介绍...)...<br>
</p>
<h3>示例:</h3>
<p>
<select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>
<input type="button" value= "open" onclick="disp(s1)">
</p>
</body>
</html>