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程序设计有所帮助。