????????最近項目中碰到客戶要求下拉框同時可以錄入,在網上找了一些資料再結合自己的體驗,把此記錄下來供以后使用:

可輸入的下拉框說白了就是下拉框(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來控制了。