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

问题描述

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

它如何接受例如ford的自定义值？

 <选择> 
< option value =volvo>沃尔沃< / option> 
< option value =saab> Saab< / option> 
< option value =mercedes> Mercedes< / option> 
< option value =audi> Audi< / option> 
< / select> 
  

编辑：
删除死链接， 。

解决方案

HTML5内置组合框。你创建一个文本 input 和一个 数据列表 。然后你添加一个 list 属性添加到输入中，其中<$ c $>的值 id c> datalist 。

它看起来像这样：

 < input type =textlist =cars/>< datalist id =cars> <选项>沃尔沃< /选项> <选项>萨伯< /选项> <选项>梅赛德斯< /选项> < />< / option>< / datalist>  

$ b

重要提示：
请注意， datalist 确实不适用于所有浏览，实际上它的支持<一个href =https://caniuse.com/#search=datalist =noreferrer>截至2018年仍然非常不成熟。根本不支持Safari浏览器，部分浏览器除Chrome以外都支持。

I would like to have input field that users can enter custom text value or choose from drop down, normal select only offers drop down options.

How can it 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>

Edit: Removed dead link, solutions are in answers.

解决方案

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.

It looks like this:

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

IMPORTANT: Be aware that datalist does not work in all browser, actually its support is still very inmature as of 2018.Not supported by safari at all, and partially in all other except chrome.

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