可以輸入的下拉框的實(shí)現(xiàn)方法其實(shí)就是select選擇框和input輸入框的組合。在select選擇框中加入onchange方法，在js中將select選中的值賦值給input輸入框。 HTML代碼

可以輸入的下拉框的實(shí)現(xiàn)方法其實(shí)就是select選擇框和input輸入框的組合。在select選擇框中加入onchange方法，在js中將select選中的值賦值給input輸入框。

HTML代碼

下面是input和select的組合，主要的難度在于樣式的調(diào)整。只要將樣式調(diào)整好，就可以實(shí)現(xiàn)一個(gè)可以輸入的下拉框。

lt;div class"input-select"gt;
  lt;input type"text" id"input-box" placeholder"請選擇或輸入" /gt;
  lt;select id"select-box" onchange"updateInputBox()"gt;
    lt;option value"爬樓高手"gt;爬樓高手lt;/optiongt;
    lt;option value"隔壁老尤條"gt;隔壁老尤條lt;/optiongt;
  lt;/selectgt;
lt;/divgt;

JavaScript代碼

以下是JavaScript腳本代碼，主要是將select選中的值賦值給input框。

function updateInputBox() {
  var selectBox  ("select-box");
  var inputBox  ("input-box");
  var selectedValue  ;
    selectedValue;
}

樣式調(diào)整

可以根據(jù)實(shí)際需求對樣式進(jìn)行調(diào)整，以適應(yīng)頁面的布局和設(shè)計(jì)。

總結(jié)

通過上述方法，我們可以實(shí)現(xiàn)一個(gè)可以輸入的下拉框。當(dāng)選擇某一個(gè)值時(shí)，會將選中的值賦值給input框。這種自己設(shè)計(jì)的可以輸入的下拉框一般用在不會使用成熟框架的情況下。通過簡單的HTML和JavaScript代碼，可以輕松實(shí)現(xiàn)這一功能。