HTML 表单: Select-Option vs 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>

数据主义者-选择

<input type="text" list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="IE">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
159873 次浏览
小开
最佳答案

把它想象成需求和建议之间的区别。对于 select元素，用户需要选择您给出的选项之一。对于 datalist元素，建议用户选择您给出的选项之一，但是实际上他可以在输入中输入他想要的任何内容。

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

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

小开

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

<input type="text" list="Gender">
<datalist id="Gender">
<option value="Male">
<option value="Female">
</datalist>
小开

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

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

如果我们将重点放在使用 <datalist>作为文本字段的选项列表上，那么这里有一些与选择框之间的具体区别:

  1. <datalist>提供的文本框只有一个用于两种显示的字符串 标签和提交。一个选择框可以有一个不同的提交值与显示标签 <option value='ie'>Internet Explorer</option>。

  2. <datalist>提供的文本框不支持 <optgroup>标记来组织显示。

  3. 不能像使用 <select>那样将用户限制在 <datalist>中的选项列表中。

  4. 改变事件的工作方式不同。在 <select>元素上，onchange 事件在更改后立即激发，而在 <input type="text"在元素丢失后触发事件 焦点或用户按下输入键。

  5. <datalist>对各种浏览器的支持参差不齐。显示所有可用选项的方式是不一致的，而且只有 从那以后更糟。

在我看来，最后一点才是最重要的。因为您将不得不有一个更通用的自动完成回退，那么几乎没有理由通过配置 <datalist>的麻烦。加上任何体面的自动完成插件将允许的方式来风格显示您的选项，这是 <datalist>没有做到的。如果 <datalist>接受的 <li>元素，你可以操作任何你想要的，这将是真正的伟大！但是没有。

就我所知，<datalist>搜索与字符串的开头完全匹配。因此，如果你有 <option value="internet explorer">和你搜索“探索者”，你会得不到任何结果。大多数自动完成插件将搜索文本中的任何地方。

我只在一些内部页面中使用过 <datalist>作为一个快速而懒惰的便利帮手，在这些页面中，我100% 确定用户使用的是最新的 Chrome 或 Firefox，并且不会尝试提交虚假值。对于其他情况，很难推荐使用 <datalist>，因为它的浏览器支持非常差。

小开

我注意到，没有选择的特征在数据。它只给你选择，但不能有一个默认选项。您也不能在下一页显示选中的选项。

小开

具体地回答你问题的一部分“有没有什么情况下使用其中一种会更好?”，考虑一个具有重复部分的表单。如果重复部分包含许多 select标记，那么必须为每个选择、每一行呈现 option。

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

小开

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

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

小开

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

相对于 datalist，select 被浏览器广泛支持。请看这个页面，以获得对 datalist 的完全浏览器支持——

数据库浏览器支持

所有浏览器(IE6 + ，Firefox 2 + ，Chrome 1 + 等)都支持 as select 吗

小开

它类似于选择，但数据库有额外的功能，如自动建议。您甚至可以在输入时输入并查看建议。

用户也将能够写的项目，不在列表中。

小开

在“ select”元素中，存在某种强迫性，用户必须在其他选项中选择一个，但是“ datalist”显示了输入用户想要的任何选项的自由，无论是从建议的选项还是从她/他想要的任何其他选项。


提交答案