您的位置：首页 > 其它

select选择框变得可以输入、编辑

2010-09-18 16:58 344 查看

一、可编辑的select

按回车键输入新内容，按DEL删除选中内容<br>
<body bgcolor="#fef4d9"
onload="s1.focus();">
<script
language="JavaScript">

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航