最近项目中碰到客户要求下拉框同时可以录入,在网上找了一些资料再结合自己的体验,把此记录下来供以后使用:

可输入的下拉框说白了就是下拉框(select)跟文本框(input type=text)的结合,把两者重叠在一起,而文本框的前半部分被隐藏了,看下面的代码:
<select name="selectmenu" style="position:absolute;:0px; width: 110px; height: 0px; 0px; clip: rect(0 180 110 90) "  onChange="document.getElementById('dmtxt').value=this.options[this.selectedIndex].value">
<option value="sina.com">sina.com</option>
<option value="sohu.com">sohu.com</option>
<option value="tom.com">tom.com</option>
<option value="126.com">126.com</option>
<option value="163.com">163.com</option>
<option value="yahoo.com.cn">yahoo.com.cn</option>
<option value="kingsoft.com">kingsoft.com</option>
</select>
<input name="dmtxt" id="dmtxt" type="text" value="" onMouseOver="this.select();this.focus();" style="position:absolute;top:0px; width: 95px; height:21px; left:0px;">
很容易就看出style="position:absolute;top:0px; width: 95px; height:21px; left:0px;"基本一样,只有width差了点点,而select中的clip:rect(0 180 110 90)是最重要的,它的原型是clip:rect(top right bottom left).
如果需要动态的生成这些代码就得修改rect的参数了,我在项目中只改了right和left,(right=width+70,left=width-20)

onChange事件是将select取得的值赋予input

可能有些人习惯于将style写在css里面，那样就需要另外增加一个div或span来控制了。