如何将输入文本字段添加到 select 元素中

Question

我尝试开发一个带有“已选择”(https://harvesthq.github.io/chosen/) 的自定义 selectbox。

我如何才能在打开的 select 框底部添加一个输入文本字段 ("Eigene Auflage")，如果有人点击它输入内容，它会将他的值添加到顶部英寸。见图：)

我是否必须将 select/option 更改为 ul/li？

这是我的标记：

<select class="replace-select">
  <option value="select-filled-1">Select Filled 1</option>
  <option value="select-filled-2">Select Filled 2</option>
  <option value="select-filled-3">Select Filled 3</option>
  <option value="select-filled-4">Select Filled 4</option>
  <option value="select-filled-5">Select Filled 5</option>
  <option value="select-filled-6">Select Filled 6</option>
  <option value="select-filled-7">Select Filled 7</option>
  <option value="select-filled-8">Select Filled 8</option>
</select>

Answer 1

您只需将一个文本框附加到所选的已创建下拉列表 div 即可，并使用事件将文本框的内容添加到原始 select。这几乎只是使用 jQuery 将框附加到正确元素的问题。

它的工作原理是当您初始化选择时，它会隐藏 select 并在几 div 秒内创建一组自定义的嵌套 li。下拉菜单 div 有 class .chosen-drop，因此您只需要使用 jQuery 到 select 带有 $(".chosen-drop") 的元素，然后将文本框附加到使用 $.append(...)。然后您的事件处理程序只需要获取该文本框的内容并将其添加到原始 select.

$(document).ready(function() {
  //initialize the chosen.
  $("#chosenSelect").chosen({
    width: "100px"
  });
  //append text box
  $("#selectContainer .chosen-drop").append('<input class = "chosen-input"/>');

  //click event for enter key
  $('.chosen-input').bind("enterKey", function(e) {
    //get value of text box, and add it to the select.
    var newValue = $(".chosen-input").val();
    //insert newValue into an option HTML with template literals
    var optionHTML =`<option value="${newValue}">${newValue}</option>`;
    $("#chosenSelect").prepend(optionHTML).trigger("chosen:updated");
    //clear the textbox after adding to the select
    $(".chosen-input").val("");
  });
  //watch for enter key
  $('.chosen-input').keyup(function(e) {
    if (e.keyCode == 13) {
      $(this).trigger("enterKey");
    }
  });
});

.chosen-input {
  width: 100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />

<div id="selectContainer">
  <label>Press enter to add new item to select</label>
  <br>
  <select id="chosenSelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</div>

如果您需要对示例中的任何元素进行解释，请告诉我。

如何将输入文本字段添加到 select 元素中

How to add an input text field into a select element

select

jquery-chosen