一、可编辑的select
按回车键输入新内容，按DEL删除选中内容<br>
<body bgcolor="#fef4d9"
onload="s1.focus();">
<script
language="JavaScript">
<!--
function
catch_keydown(sel)
{
switch(event.keyCode)
{
case 13:
//Enter;
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;
}
//-->
</script>
<select name=s1
onkeydown="catch_keydown(this);" onkeypress="catch_press(this);"
style="font-size:12px;"><option>-12121212121212</option><option>232323232323</option><option>343434343434</option><option>45454545454545</option><option>565656565656</option></select>
二、可输入：
<html>
<head>
<title>助记码的select选择完美方案</title>
</head>
<script>
var
addressName=new Array("沈阳","北京","大连","抚顺","天津","上海");
var addressHelpCode=new
Array("sy","bj","dl","fs","tj","sh");
var
getSelectHelpCode=document.getElementsByName("selectHelpCode");
function init(){
with(getSelectHelpCode[0]){
length=addressName.length;
for(var i=0;i<length;i++){
options[i].value=addressHelpCode[i];
options[i].text=addressName[i];
}
}
}
function writeSelect(obj){
obj.options[obj.selectedIndex].text=obj.options[obj.selectedIndex].text +
String.fromCharCode(event.keyCode);
event.returnValue=false;
}
function catch_keydown(sel)
{
switch(event.keyCode)
{
case 46:
//delete
sel.options[sel.selectedIndex].text ="";
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;
case 13:
//Enter;
vertiyt(sel)
event.returnValue = false;
break;
}
}
function vertiyt(obj){
var yy=false;
var jj=-1;
with(obj){
for(var i=0;i<addressName.length;i++){
var
selectedValue=options[selectedIndex].value;
var
selectedText=options[selectedIndex].text;
if(addressName[i]==selectedText||addressHelpCode[i]==selectedText){
yy=true;
jj=i;
}
}
}
if(yy==true){
init();
obj.options[jj].selected=true;
}else{
init();
alert("没有/""+selectedText+"/"这个地点或是助记码！！");
}
}
</script>
<body onload="init()">
<select
name="selectHelpCode" onBlur="vertiyt(this)" onkeydown="catch_keydown(this)"
onkeypress="writeSelect(this)"><option>--</option></select>
<br>
让select变得可以输入，并且可以验证。
<br>
这个功能是我在一个项目中所用到的。
<br>
希望对大家有用！
</body>
</html>
<script>
function pp(){
unitid.options[9]=new Option(ok=(unitid.options[9])?unitid.options[9].innerText+String.fromCharCode(event.keyCode):String.fromCharCode(event.keyCode),"client")
unitid.selectedIndex=9;
}
function edit(){
if(unitid.options[9]){
if(event.keyCode==8){
var str=unitid.options[9].innerText;
var len=str.length;
unitid.options[9].innerText=str.substring(0,len-1);
if(unitid.options[9].innerText=="")unitid.remove(9);
}
if(event.keyCode==13)return false;
if(event.keyCode==32){
unitid.options[9].innerText+=" ";
}
}
}
</script>
<select id=unitid onkeypress=pp() onkeyup="edit()">
<option> </option>
<option>个</option>
<option>件</option>
<option>盒</option>
<option>箱</option>
<option>双</option>
<option>条</option>
<option>瓶</option>
<option>罐</option>
</select>