這篇文章主要介紹了js實(shí)現(xiàn)Select下拉框具有輸入功能的方法,實(shí)例分析了兩種比較常見的實(shí)現(xiàn)方法,是非常實(shí)用的技巧,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)Select下拉框具有輸入功能的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
實(shí)現(xiàn)方法一
代碼如下:
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>js實(shí)現(xiàn)可輸入的下拉框</TITLE>
</HEAD>
<BODY>
<div>
<span>
<select onchange="this.parentNode.nextSibling.value=this.value">
<option value="德國">德國</option>
<option value="挪威">挪威</option>
<option value="瑞士"> 瑞士</option>
</select></span><input name="box">
</div>
</BODY>
</HTML>
實(shí)現(xiàn)方式二
代碼如下:
<select id="select" onkeydown="Select.del(this,event)" onkeypress="Select.write(this,event)">
<option value=""></option>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<input type="button" value="獲取選擇值" id="test" onclick="test();"/>
<script>
var Select = {
del : function(obj,e){
if((e.keyCode||e.which||e.charCode) == 8){
var opt = 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 ;
var opt = obj.options[0];
opt.selected = "selected";
opt.text = opt.value += String.fromCharCode(e.charCode||e.which||e.keyCode);
}
}
function test(){
alert(document.getElementById("select").value);
}
</script><br />