172

我想知道 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-选项

<input type="text" list="browsers">
<datalist id="browsers">
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
4

8 回答 8

229

将其视为要求和建议之间的区别。对于select元素，用户需要选择您提供的选项之一。对于datalist元素，建议用户选择您提供的选项之一，但他实际上可以在输入中输入任何他想要的内容。

编辑1：所以你使用哪一个取决于你的要求。如果用户必须输入您的选择之一，请使用该select元素。如果使用可以输入任何内容，请使用datalist元素。

编辑 2：在HTML 生活标准中找到这个花絮：“作为 datalist 元素后代的每个选项元素......代表一个建议。”

于 2011-08-09T19:54:14.190 回答
79

从技术角度来看，它们是完全不同的。<datalist>是其他元素选项的抽象容器。在您的情况下，您已经使用它，<input type="text"但您也可以将它与范围、颜色、日期等一起使用。http://demo.agektmr.com/datalist/

如果将它与文本输入一起使用，作为一种自动完成，那么问题真的是：使用自由格式的文本输入还是使用预定的选项列表更好？在那种情况下，我认为答案会更明显一些。

如果我们专注于使用<datalist>作为文本字段的选项列表，那么这里是它与选择框之间的一些具体区别：

  1. 馈送文本框具有用于显示标签和提交的<datalist>单个字符串。选择框可以有不同的提交值和显示标签<option value='ie'>Internet Explorer</option>。

  2. 馈送的<datalist>文本框不支持<optgroup>标签来组织显示。

  3. 您不能<datalist>像使用<select>.

  4. onchange事件的工作方式不同。在<select>元素上，onchange 事件在更改时立即触发，而 with <input type="text"事件在元素失去焦点或用户按下回车后触发。

  5. <datalist>跨浏览器的支持确实参差不齐。显示所有可用选项的方式不一致，而且事情只会变得更糟。

在我看来，最后一点真的很重要。既然你必须有一个更通用的自动完成后备，那么几乎没有理由去麻烦配置一个<datalist>. 此外，任何体面的自动完成插件都将允许您设置选项显示的样式，但这<datalist>是行不通的。如果<datalist>接受<li>您可以随心所欲地操纵的元素，那就太好了！但不是。

同样据我所知，<datalist>搜索是从字符串开头开始的完全匹配。因此，如果您有<option value="internet explorer">并且您搜索了“explorer”，您将不会得到任何结果。大多数自动完成插件将搜索文本中的任何位置。

我只用作<datalist>一些内部页面的快速和懒惰的便利助手，我知道 100% 确定用户拥有最新的 Chrome 或 Firefox，并且不会尝试提交虚假值。<datalist>对于任何其他情况，由于浏览器支持非常差，因此很难推荐使用。

于 2014-02-17T18:00:50.323 回答
11

Datalist 本身包含自动完成和建议，它还可以允许用户输入建议中未定义的值。

Select only 为您提供用户必须从中选择的预定义选项

于 2016-12-22T00:39:22.367 回答
3

数据列表是支持 HTML5 的浏览器中的新 HTML 标记。它呈现为带有一些选项列表的文本框。例如，对于性别文本框，当您在文本框中键入“M”或“F”时，它将为您提供男性女性选项。

<input type="text" list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female"> 
</datalist>
于 2013-09-13T12:31:41.507 回答
2

它类似于 select，但 datalist 具有自动建议等附加功能。您甚至可以在键入时键入并查看建议。

用户还可以编写列表中不存在的项目。

于 2017-09-24T05:37:41.667 回答
1

要具体回答您问题的一部分“在任何情况下使用其中一个会更好吗？”，请考虑一个带有重复部分的表格。如果重复部分包含许多select标签，则option必须为每个选择、每一行呈现 s。

在这种情况下，我会考虑使用datalistwith input，因为它datalist可以用于任意数量的inputs。这可能会在服务器上节省大量渲染时间，并且可以更好地扩展到任意数量的行。

于 2016-01-14T20:39:19.380 回答
0

我注意到 datalist 中没有选定的功能。它只给你选择，但不能有默认选项。您也无法在下一页上显示所选选项。

于 2015-05-21T18:19:19.147 回答
0

select和之间还有另一个重要区别datalist。这是浏览器支持因素。

与 datalist 相比，select 被浏览器广泛支持。请查看此页面以获取对 datalist 的完整浏览器支持--

数据列表浏览器支持

所有浏览器都有效地支持选择（从 IE6+、Firefox 2+、Chrome 1+ 等开始）

于 2017-01-27T00:55:29.953 回答