如何在下拉选择选项中添加文本框

Question

我正在尝试在下拉列表中添加文本框，但下面的下拉列表中看不到文本框是所需输出的图片

 $.each(SegGoalData, function(i, v) {
   $("#Select").append("<option value=" + SegGoalData[i][0] + ">" + SegGoalData[i][1] + "</option>"); // i am adding value to dropdown
   $("#Select").append("<option><input type='text' name='fname'></option>"); // i am trying to append to textbox
 })

<select id="Select">

  <option selected="selected" disabled="disabled">Look here for more goals</option>

</select>

Answer 1

这是不可能的，因为浏览器本机UI不支持该功能，因此您必须执行自定义UI，或使用已经为您完成此操作的库。如上所述。 https://select2.github.io/是您的最佳选择，可能还有其他库可以执行此操作。

他们会将您的<select>...</select>标记替换为自己的HTML。

您必须非常小心，如果您使用ajax加载，如果您选择使用ajax加载它，则每次都必须重新实例化它。

Answer 2

您可以使用select2 JS

Select2是一个功能齐全，功能丰富的选择替换/增强插件。它不仅可以重新设置您的选择元素，还可以使用其他功能扩展它们。

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".custom-select2").select2();
});

＆＃13;

.custom-select2{width:200px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

<select class="custom-select2">
  <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
</select>

＆＃13;

＆＃13;

＆＃13;

与其他高级选择插件非常相似，它包含一大堆可自定义的功能，例如：

• 带有optgroups的单选元素/元素
• 多选元素
• 选择元素的可排序/可过滤搜索字段
• 能够从远程数据源加载数据（例如从API动态更改选项）
• 标记支持（从预定义列表中选择/动态添加动态标记）

Answer 3

你现在不能。只需使用专用的可搜索下拉插件（Choosen，Select2等等），或制作您自己的：）

但是，Mozilla已经在开发此功能： Bug 1309935 - Add ability to find within select dropdown when over 40 elements（查看specs）