JS為Select下拉框增加輸入功能，select下拉框

JS為Select下拉框增加輸入功能，select下拉框

JavaScript使用parentNode.nextSibling.value實現的本功能，實際上你會發現網頁上有兩個控制項元素，一個是Select，一個是input，使用CSS將input覆蓋於select之上，再使用JS將下拉框的值賦值給input，實際上是用input類比出了select的功能，思路很新穎，也不知到底有多少人需要select可輸入文字的功能，下面是詳細的實現代碼：前端資源分享

.代碼  

1. <div style="position:relative;">  
2. <span style="margin-left:100px;width:18px;overflow:hidden;">  
3. <select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">  
4. <option value="天藍藍">天藍藍</option>  
5. <option value="草綠綠">草綠綠</option>  
6. <option value="水清清">水清清</option>  
7. </select></span><input name="box" style="width:100px;position:absolute;left:0px;">  

 

在本例中，CSS實現input輸入框的定位，JS實現將使用者所選擇的Select的值顯示在input中。

js 實現下拉框展開

1.給select命名一個id屬性，比如select的id叫做ddlSelect
2.給button按鈕加個onclick事件，如下下
<input type="button" value="aa" onclick="document.getElementById('ddlSelect').size = document.getElementById('select').length;"/>

這樣可實現展開效果

提示下：該select原本在js中是沒有自動延伸的屬性的，只能設定select標籤的size屬性來實現展開的效果
 
js怎動態產生下拉框

<div id="tt"></div>
<input type="button" value="添加select" onClick="createSelect()" />
<script>
function createSelect(){

document.getElementById("tt").innerHTML = "<select name=sel1><option value=1>1</option><option value=2>2</option></select>";
}
</script>