我想知道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>
发布于 2011-08-10 03:54:14
可以把它看作是需求和建议之间的区别。对于select
元素,用户需要从您提供的选项中选择一个。对于datalist
元素,建议用户从您提供的选项中选择一个,但实际上他可以在输入中输入任何他想要的内容。
编辑1:因此,您使用哪一个取决于您的需求。如果用户必须输入您的选择之一,请使用select
元素。如果用户可以输入任何内容,请使用datalist
元素。
编辑2:在HTML Living Standard中发现了这个花招:“每个作为数据列表后代的element...represents元素都有一个建议。”
发布于 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>
,因为对浏览器的支持非常差。
发布于 2016-12-22 08:39:22
Datalist本身包括自动补全和建议,它还允许用户输入建议中未定义的值。
Select仅为您提供用户必须从中进行选择的预定义选项
https://stackoverflow.com/questions/6865943
复制相似问题