HTML表单: Select-Option与Datalist-Option
我想知道Select-Option和Datalist-Option有什么不同。有没有哪种情况下使用其中一种更好呢？下面是每种方法的示例：
精选-选项
<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>Datalist-Option
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="IE">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>回答 8
Stack Overflow用户
发布于 2011-08-10 03:54:14
可以把它看作是需求和建议之间的区别。对于select元素，用户需要从您提供的选项中选择一个。对于datalist元素，建议用户从您提供的选项中选择一个，但实际上他可以在输入中输入任何他想要的内容。
编辑1:因此，您使用哪一个取决于您的需求。如果用户必须输入您的选择之一，请使用select元素。如果用户可以输入任何内容，请使用datalist元素。
编辑2:在HTML Living Standard中发现了这个花招：“每个作为数据列表后代的element...represents元素都有一个建议。”
Stack Overflow用户
发布于 2014-02-18 02:00:50
从技术角度来看，它们是完全不同的。<datalist>是其他元素的选项的抽象容器。在您的例子中，您已经将其用于<input type="text"，但您也可以将其用于范围、颜色、日期等。http://demo.agektmr.com/datalist/
如果将它与文本输入一起使用，作为自动完成的一种类型，那么真正的问题是:使用自由格式的文本输入还是使用预先确定的选项列表更好？在这种情况下，我认为答案会更明显一些。
如果我们专注于使用<datalist>作为文本字段的选项列表，那么下面是它与选择框之间的一些具体区别：
-
<datalist>fed文本框具有用于显示标签和提交的单个字符串。选择框可以具有与显示标签<option value='ie'>Internet Explorer</option>.
不同的提交值
-
<datalist>fed文本框不支持<optgroup>标记来组织显示。
不能像使用<select>.一样，将用户限制在
- 的
<datalist>选项列表中
onchange
- 事件的工作方式不同。在
<select>元素上，onchange事件在更改后立即激发，而对于<input type="text"，该事件在元素失去焦点或用户按enter键后激发。
<datalist>的跨浏览器支持确实参差不齐。显示所有可用选项的方式并不一致，从那时起，情况只会变得更糟。
最后一点在我看来是很重要的。由于您将必须具有更通用的自动完成回退，因此几乎没有理由经历配置<datalist>的麻烦。此外，任何像样的自动完成插件都将允许对选项的显示设置样式，这是<datalist>所做不到的。如果<datalist>接受可以随心所欲地操作的<li>元素，那就太棒了！但不是。
另外，据我所知，<datalist>搜索是从字符串的开头完全匹配的。因此，如果你使用<option value="internet explorer">搜索“explorer”，你将得不到任何结果。大多数自动完成插件可以在文本中的任何位置进行搜索。
我只使用<datalist>作为一些内部页面的快速和懒惰的方便助手，我100%确定用户有最新的Chrome或Firefox，不会试图提交虚假的值。对于其他任何情况，很难推荐使用<datalist>，因为对浏览器的支持非常差。
Stack Overflow用户
发布于 2016-12-22 08:39:22
Datalist本身包括自动补全和建议，它还允许用户输入建议中未定义的值。
Select仅为您提供用户必须从中进行选择的预定义选项
https://stackoverflow.com/questions/6865943
复制相似问题