javascript實作的一個帶有下拉框功能的文字方塊

有時我們需要一個可選的下拉框來選取內容，但是但是又有可以自訂輸入的需求。對於這種需求，網站大部分使用的都是一個下拉框和一個 input text ，並列或分行給予選擇。那麼，我們希望它看起來像一個可以輸入也可以選擇的下拉框，那該如何做呢？

其實我們可以透過 css position 定位及少許的 javascript 程式碼，模擬出來這種效果。

複製程式碼 程式碼如下: 可编辑可选择的下拉框 .list-name-input{ color: #333; font-family: tahoma, 'Microsoft YaHei', 'Segoe UI', Arial, 'Microsoft Yahei', Simsun, sans-serif; font-size: 15px; font-weight: bold; height: 50px; margin: 0px; padding: 0px; position: relative; width: 530px; } .list-name-for-select{ border: 0; color: #555; height: 20px; lighting-color: rgb(255, 255, 255); line-height: 20px; margin:0 0 10px 0; outline-color: #555; outline-offset: 0px; outline-style: none; outline-width: 0px;

內邊距：4px 6px； 位置：絕對； 上方：1px； } .list-name-input-for-select:focus{ 邊框: 0; 邊框半徑: 0; } 邊框半徑: 0; } 邊框：1px #ccc 實體； 邊框半徑：4px； 顏色：#555； 🎜> 邊距:0 0 10px 0; 內邊距: 4px 6px; 位置: 絕對; 頂部: 0px; 垂直對齊: 中間; 空白: 前; 寬度：530px; } 新建 10-NGCFG-update-1000 11-NGCFG-update-1000 111 12-NGCFG-update-1000 13-NGCFG-update-1000 14-NGCFG-update-1000 15-NGCFG-update-1000 16-NGCFG-update-1000 17-NGCFG-update-1000 18-NGCFG-update-1257 2-NGCFG-update-100 3-NGCFG-update-150 4-NGCFG-update-200 5-NGCG-update-250 6-NGCFG-update-418 7-NGCFG-update-500 8-NGCFG-update-1000 9-ngcfg-update-1000 ＆lt;/option＆gt; ＆lt; option value =“ 18”＆gt; @all @all ＆lt>＆lt;/option＆gt; 19"> @CNC-BJ-4 CNC-BJ--測試

/選項&gt ; 🎜>

var listName = document.getElementById('list-name-for-select'); var listSelect = document.getElementById('list-select').onchange = function(e ) { console.log(this) if(this.value){ listName.value = this.value ' | this.options[this.selectedIndex]. listName.value = '' } }; 正文>

javascript實作的一個帶有下拉框功能的文字方塊_javascript技巧