这篇文章主要介绍了js实现select下拉框具有输入功能的方法,实例分析了两种比较常见的实现方法,是非常实用的技巧,需要的朋友可以参考下
本文实例讲述了js实现select下拉框具有输入功能的方法。分享给大家供大家参考。具体实现方法如下：
实现方法一
代码如下:
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=gb2312'>
<title>js实现可输入的下拉框</title>
</head>
<body>
<div style=position:relative;>
<span style=margin-left:100px;width:18px;overflow:hidden;>
<select style=width:118px;margin-left:-100px onchange=this.parentnode.nextsibling.value=this.value>
<option value=德国>德国</option>
<option value=挪威>挪威</option>
<option value=瑞士> 瑞士</option>
</select></span><input name=box style=width:100px;position:absolute;left:0px;>
</div>
</body>
</html>
实现方式二
代码如下:
<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 />