Question

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

Answer 1

将其视为需求与建议之间的差异。对于select元素，用户需要选择您给出的其中一个选项。对于datalist元素，建议用户选择您给出的其中一个选项，但他实际上可以在输入中输入他想要的任何内容。

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

编辑2：在HTML Living Standard中找到这个小窍门：“每个选项元素是datalist元素的后代......代表一个建议。”

Answer 2

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

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

如果我们专注于使用<datalist>作为文本字段的选项列表，那么这里有一些特定的区别：

<datalist> Feed文本框有一个字符串，用于显示标签和提交。对于显示标签<option value='ie'>Internet Explorer</option>，选择框可以具有不同的提交值。
<datalist> Feed文本框不支持<optgroup>标记来整理显示。
您无法像<datalist>一样限制用户使用<select>中的选项列表。
onchange 事件的工作方式不同。在<select>元素上，onchange事件在更改时立即触发，而对于<input type="text"，事件在元素失去焦点或用户按Enter后触发。
<datalist>在各种浏览器中都非常支持。显示所有可用选项的方式不一致，事情只会从那里变得更糟。

在我看来，最后一点确实是最重要的一点。由于您必须具有更通用的自动完成回退功能，因此几乎没有理由遇到配置<datalist>的麻烦。此外，任何体面的自动完成插件都可以为您的选项显示提供样式，<datalist>不会这样做。如果<datalist>接受<li>个元素，你可以随意操作，那就太棒了！但是没有。

另据我所知，<datalist>搜索与字符串开头的完全匹配。因此，如果您有<option value="internet explorer">并且搜索了“资源管理器”，那么您将无法获得任何结果。大多数自动填充插件都会在文本中的任何位置进行搜索。

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

Answer 3

Datalist本身包含自动填充和建议，它还允许用户输入未在建议中定义的值。

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

Answer 4

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

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

Answer 5

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

Answer 6

要专门回答您问题的一部分“在使用其中一种情况会更好吗？”，请考虑一个带有重复部分的表格。如果重复部分包含许多select个标记，那么必须为每个选择为每一行呈现option。

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

Answer 7

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

与datalist相比，浏览器广泛支持

select。请查看此页面以获取datalist的完整浏览器支持 -

Datalist browser support

有效地支持所有浏览器的选择（因为IE6 +，Firefox 2 +，Chrome 1+等）

Answer 8

它类似于select，但是datalist还有其他功能，如自动建议。您甚至可以在键入时键入并查看建议。

用户还可以编写列表中没有的项目。

HTML表单：Select-Option vs Datalist-Option

8 个答案: