js实现Select下拉框具有输入功能的方法

前端技术 2023/09/08 JavaScript

本文实例讲述了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 />

希望本文所述对大家的javascript程序设计有所帮助。

本文地址:https://www.stayed.cn/item/21723

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。