一、可编辑的select
按回车键输入新内容,按DEL删除选中内容<br>
<body bgcolor="#fef4d9" οnlοad="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 οnkeydοwn="catch_keydown(this);" οnkeypress="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 οnlοad="init()">
<select name="selectHelpCode" onBlur="vertiyt(this)" οnkeydοwn="catch_keydown(this)" οnkeypress="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 οnkeypress=pp() οnkeyup="edit()">
<option> </option>
<option>个</option>
<option>件</option>
<option>盒</option>
<option>箱</option>
<option>双</option>
<option>条</option>
<option>瓶</option>
<option>罐</option>
</select>
- <script language="javascript">
- function changeF()
- {
- document.getElementById('makeupCo').value=
- document.getElementById('makeupCoSe').options[document.getElementById('makeupCoSe').selectedIndex].value;
- }
- </script>
- <span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;
- height:19px;clip:rect(-1px 190px 190px 170px);">
- <select name="makeupCoSe" id="makeupCoSe" style="width:190px;height:20px;margin:-2px;" onChange="changeF();">
- <option id='1' value='java'>java</option>
- <option id='2' value='c++'>c++</option>
- <option id='3' value='python'>python</option>
- <OPTION id="99999" VALUE="" SELECTED>
- </select>
- </span>
- <span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt
- solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">
- <input type="text" name="makeupCo" id="makeupCo" value="请选择或输入" style="width:170px;height:15px;border:0pt;">
- </span>