js实现Select下拉框具有输入功能的方法
本文实例讲述了js实现Select下拉框具有输入功能的方法。分享给大家供大家参考。具体实现方法如下：
实现方法一
<HTML> <HEAD> <METAhttp-equiv='Content-Type'content='text/html;charset=gb2312'> <TITLE>js实现可输入的下拉框</TITLE> </HEAD> <BODY> <divstyle="position:relative;"> <spanstyle="margin-left:100px;width:18px;overflow:hidden;"> <selectstyle="width:118px;margin-left:-100px"onchange="this.parentNode.nextSibling.value=this.value"> <optionvalue="德国">德国</option> <optionvalue="挪威">挪威</option> <optionvalue="瑞士">瑞士</option> </select></span><inputname="box"style="width:100px;position:absolute;left:0px;"> </div> </BODY> </HTML>
实现方式二
<selectid="select"onkeydown="Select.del(this,event)"onkeypress="Select.write(this,event)">
<optionvalue=""></option>
<optionvalue="aaa">aaa</option>
<optionvalue="bbb">bbb</option>
<optionvalue="ccc">ccc</option>
</select>
<inputtype="button"value="获取选择值"id="test"onclick="test();"/>
<script>
varSelect={
del:function(obj,e){
if((e.keyCode||e.which||e.charCode)==8){
varopt=obj.options[0];
opt.text=opt.value=opt.value.substring(0,opt.value.length>0?opt.value.length-1:0);
}
},
write:function(obj,e){
if((e.keyCode||e.which||e.charCode)==8)return;
varopt=obj.options[0];
opt.selected="selected";
opt.text=opt.value+=String.fromCharCode(e.charCode||e.which||e.keyCode);
}
}
functiontest(){
alert(document.getElementById("select").value);
}
</script><br/>
希望本文所述对大家的javascript程序设计有所帮助。