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 />
希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍js实现select下拉框菜单，包括了js实现select下拉框菜单的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现select下拉框菜单的详细代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html> 如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。 以上就是js实
-
本文向大家介绍Select下拉框模糊查询功能实现代码，包括了Select下拉框模糊查询功能实现代码的使用技巧和注意事项，需要的朋友参考一下 select下拉列表框支持输入模糊查询功能，设计非常的人性化，下面小编给大家分享了关键代码，大家根据自己的需求适当的添加修改，有任何问题欢迎给我反馈。 关键代码如下所示： 以上所述是小编给大家介绍的Select下拉框模糊查询功能实现代码，希望对大家有所帮助，如
-
本文向大家介绍Bootstrap框架下下拉框select搜索功能，包括了Bootstrap框架下下拉框select搜索功能的使用技巧和注意事项，需要的朋友参考一下 之前用Easyui框架下做的下拉框选择，虽然可以搜索，但是有诸多的不便：比如，不能模糊匹配，必须按照第一个字母来搜索 心血来潮，想换个框架写后台，然后用Bootstrap搭了个架子，然后两种样式冲突，百度了一把，找到了另一个牛逼的基于B
-
本文向大家介绍angularjs 实现带查找筛选功能的select下拉框实例，包括了angularjs 实现带查找筛选功能的select下拉框实例的使用技巧和注意事项，需要的朋友参考一下 一.背景 对于select的下拉列表，像国家选择这样的功能，全世界那么多国家，一直拉滚动条多辛苦，眼睛也要盯着找，累！so，为优化用户体验，带查找功能的下拉框是非常非常有必要的。都知道jquery里有这样的插件，
-
本文向大家介绍jsonp实现百度下拉框功能的方法分析，包括了jsonp实现百度下拉框功能的方法分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jsonp实现百度下拉框功能的方法。分享给大家供大家参考，具体如下： 思路就是获取用户输入，然后根据用户输入调用百度的一个接口jsonp实现跨域请求，然后将百度返回给的内容渲染数据到视图。需要注意的就是，发送请求的时候记得编码用户输入的内容 更多
-
本文向大家介绍jQuery模拟select实现下拉菜单功能，包括了jQuery模拟select实现下拉菜单功能的使用技巧和注意事项，需要的朋友参考一下 用jquery模拟一淘上面的搜索下拉的功能，利用css3做箭头的动画效果。 JS代码： demo:(只有在高级的chrome及firefox下才能看到CSS3动画效果) 截个图： 代码： 以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多