HTML选择下拉列表,带有输入字段

Question

HTML选择下拉列表,带有输入字段

如何在HTML中使用文本输入选项实现选择样式下拉菜单？

想法是有人可以从预定义选项列表中进行选择,或者输入他们自己的选项.

Answer 1

您可以使用带有"list"属性的输入文本,该属性指的是值的数据列表.

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

Run Code Online (Sandbox Code Playgroud)

这将创建一个自由文本输入字段,该字段还具有下拉列表以选择预定义的选项.例如归因和更多信息:https://www.w3.org/wiki/HTML/Elements/datalist

在Safari中根本不支持它.http://www.w3schools.com/tags/tag_datalist.asp (9认同)
嗨Oleg,原始海报要求插件或一些示例代码 - 你能否充实你的答案,以显示如何应用"列表"属性来做他们想要的？谢谢. (4认同)
哇.现在我刚学到了新东西.我认为没有多少程序员知道解决问题的这个简单技巧.谢谢. (4认同)
Datalist可以解决这个问题,但是某些浏览器(exfor chrome)的显示可能会出现问题.与select元素相反,你不能设置样式甚至简单地使用滚动条,这对于长列表来说是个大问题. (2认同)
有没有一种方法只需单击一下即可打开选择框。目前，如果我在输入字段上单击两次或单击向下箭头，就可以打开它。 (2认同)

归档时间：	12 年，5 月前
查看次数：	90579 次
最近记录：	6 年，1 月前