带有输入条目选项的 HTML 组合框

标签 html combobox

我的印象是,除了选择列表中已有的任何值外,您还可以在组合框中键入内容。但是,我似乎无法找到有关如何执行此操作的信息。是否需要添加一个属性以允许输入文本?

最佳答案

datalist(见下面的注释)之前,您需要提供一个额外的 input 元素,供人们输入他们自己的选项。

<select name="example">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="-">Other</option>
</select>

<input type="text" name="other">

此机制适用于所有浏览器并且不需要 JavaScript

如果选择了“其他”选项,您可以使用一些 JavaScript 巧妙地只显示 input

数据列表元素

datalist 元素旨在为这个概念提供更好的机制。在某些浏览器中,例如iOS Safari < 12.2,这不受支持或实现有问题。 Check the Can I Use page to see current datalist support .

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">  
  <option value="B">
</datalist>

关于带有输入条目选项的 HTML 组合框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14614702/

相关文章:

javascript - 我可以将本地文件加载到 html canvas 元素中吗?

WPF 对 Automation Peer API 的递归调用无效

html - Wicket:带有用于多选的复选框的下拉框

c# - 选定的组合框到文本框

html - CSS:如何增加两个元素之间的距离?

javascript - 如何在 chrome 中创建一个固定在顶部的工具栏并让所有固定元素正常工作

c# - 带 list 的组合框

c# - 如何创建组合框以在用户在 C# 的组合框中键入拼写时自动填充

javascript - 如何制作多列无序列表?

javascript - 如何在 django 框架中将不同用户的多条推文嵌入到 HTML 中?