HTML 表单：Select-Option 与 Datalist-Option

我想知道 Select-Option 和 Datalist-Option 之间有什么区别。在任何情况下使用其中一种会更好吗？每个示例如下：

选择选项

数据列表选项

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

select 和 datalist 之间还有一个重要的区别。
浏览器支持因素来了。

与 datalist 相比，

select 被浏览器广泛支持。请查看此页面以获得对 datalist 的完整浏览器支持–

Datalist 浏览器支持

所有浏览器都有效支持选择(从 IE6、Firefox 2、Chrome 1 等开始)

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