带有输入自定义值选项的 HTML 选择表单 [英] HTML select form with option to enter custom value

问题描述

我想要一个输入字段，用户可以输入自定义文本值或从下拉列表中进行选择.常规 仅提供下拉选项.

I would like to have an input field that users can enter custom text value or choose from drop down. A regular <select> only offers drop down options.

如何让

接受自定义值?例如:福特?

How can I make a <select> accept custom value? For instance: Ford?

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

推荐答案

HTML5 有一个内置的组合框.您创建一个文本 input 和一个 datalist.然后你添加一个 list 属性给 input，其值为 datalist 的 id.

HTML5 has a built-in combo box. You create a text input and a datalist. Then you add a list attribute to the input, with a value of the id of the datalist.

更新:截至 2019 年 3 月，所有主要浏览器(现在包括 Safari 12.1 和 iOS Safari 12.3)都支持 datalist 到此功能所需的级别.有关详细的浏览器支持，请参阅 caniuse.

Update: As of March 2019 all major browsers (now including Safari 12.1 and iOS Safari 12.3) support datalist to the level needed for this functionality. See caniuse for detailed browser support.

看起来像这样:

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>

这篇关于带有输入自定义值选项的 HTML 选择表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！