HTML 实现可输入select标签

转自：http://blog.csdn.net/zhenxino8/article/details/46637461

一般情况下，Select下拉框是只能选择，不能用来输入内容的。当select下拉框中没有要选择的信息项时，可以直接在select中输入自己想要得信息项，在输入信息项时，不改变select下拉框中原有的信息项

实现方式



<select id="select" οnkeydοwn="Select.del(this,event)" οnkeypress="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" οnclick="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 />

参考资料： 如何让Select下拉框具有输入功能http://www.studyofnet.com/news/550.html

1. <script language="javascript">  
2.     function changeF()  
3.     {  
4.        document.getElementById('makeupCo').value=  
5.        document.getElementById('makeupCoSe').options[document.getElementById('makeupCoSe').selectedIndex].value;  
6.     }  
7. </script>  
8.   
9. <span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;  
10.     height:19px;clip:rect(-1px 190px 190px 170px);">  
11. <select name="makeupCoSe" id="makeupCoSe" style="width:190px;height:20px;margin:-2px;" onChange="changeF();">  
12.     <option id='1' value='java'>java</option>  
13.     <option id='2' value='c++'>c++</option>  
14.     <option id='3' value='python'>python</option>  
15.     <OPTION id="99999" VALUE="" SELECTED>  
16. </select>  
17. </span>  
18. <span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt   
19.     solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">  
20.     <input type="text" name="makeupCo" id="makeupCo" value="请选择或输入" style="width:170px;height:15px;border:0pt;">  
21. </span>