如何在HTML中输入文本选择标签？

Question

我想在select标签中输入选项，以便用户可以选择选项或插入不同的值 有可能吗？

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  **<insert user value>**
</select>

Answer 1

带有“list”属性的HTML解决方案：

<input type="text" name="city" list="citynames">
<datalist id="citynames">
  <option value="Boston">
  <option value="Cambridge">
</datalist>

Answer 2

您必须使用javascript来获取额外的价值。查看这篇文章，了解一些示例代码：

Jquery dynamically update "other" option in select

Answer 3

选择元素不能包含option或optgroup元素以外的任何内容。这是规范http://www.w3.org/TR/html5/forms.html#the-select-element

的参考

您可能最好在下拉列表中为“其他”添加选项，然后使用JS检测该选项以动态显示自定义值的输入（在下拉列表下方）。

Answer 4

将输入框放在选择框上并删除输入框的边框。使输入框的长度比选择框短，这样选择框仍可在其末尾使用。

使用oninput事件检测输入框中输入的输入。在每次击键时，在选择框中检查是否继续匹配。当匹配不再存在时，不再需要选择框。

服务器期望接收文本框输入（如果有）和选择框输入（如果有），并且如果提供输入值，则应使用选择值。