HTML 表单：Select-Option 与 Datalist-Option


HTML Form: Select-Option vs Datalist-Option

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

选择选项

1
2
3
4
5
6
7
<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>

数据列表选项

1
2
3
4
5
6
7
8
<input type="text" list="browsers">
<datalist id="browsers">
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
相关讨论

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

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

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

相关讨论

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

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

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

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

  • <datalist> 馈送文本框不支持 <optgroup> 标记来组织显示。

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

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

  • <datalist> 对跨浏览器的支持确实参差不齐。显示所有可用选项的方式不一致，事情只会得到
    从那里开始更糟。

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

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

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

    相关讨论

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

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

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

    1
    2
    3
    4
    5
    <input list="Gender">
    <datalist id="Gender">
      <option value="Male">
      <option value="Female>
    </datalist>
    相关讨论

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

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

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

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

    相关讨论

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

    与 datalist 相比，

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

    Datalist 浏览器支持

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

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

    相关讨论