手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js实现Select下拉框具有输入功能的方法
js实现Select下拉框具有输入功能的方法
摘要:本文实例讲述了js实现Select下拉框具有输入功能的方法。分享给大家供大家参考。具体实现方法如下:实现方法一复制代码代码如下:js实现可输...

本文实例讲述了js实现Select下拉框具有输入功能的方法。分享给大家供大家参考。具体实现方法如下:

实现方法一

复制代码 代码如下:<HTML>

<HEAD>

<META http-equiv='Content-Type' content='text/html; charset=gb2312'>

<TITLE>js实现可输入的下拉框</TITLE>

</HEAD>

<BODY>

<div>

<span>

<select onchange="this.parentNode.nextSibling.value=this.value">

<option value="德国">德国</option>

<option value="挪威">挪威</option>

<option value="瑞士"> 瑞士</option>

</select></span><input name="box">

</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"/>

<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下拉框具有输入功能的方法】相关文章:

javascript基于DOM实现省市级联下拉框的方法

jQuery基于图层模仿五星星评价功能的方法

js+html5实现canvas绘制镂空字体文本的方法

JS实现上下左右对称的九九乘法表

js实现两点之间画线的方法

jQuery实现将页面上HTML标签换成另外标签的方法

js实现点击链接后延迟3秒再跳转的方法

简述JavaScript中正则表达式的使用方法

js+html5实现canvas绘制圆形图案的方法

JS实现两表格里数据来回转移的方法

精品推荐
分类导航