html中的select下拉框具有输入功能

34423 人推荐了该资源

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

<html> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 
<body> 
	<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>
</body> 
</html>