HTML表单：select选项与数据select选项
我想知道Select-Option和Datalist-Option之间有什么区别。 有没有什么情况可以使用其中一种？ 每个例子如下：
select-选项
<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>
把它看作需求和build议之间的区别。 对于select元素，用户需要select你给出的选项之一。 对于datalist元素，build议用户select你给出的选项之一，但是他可以在input中实际input他想要的任何东西。
编辑1：所以你使用哪一个取决于你的要求。 如果用户必须input您的select，请使用select元素。 如果使用可以input任何内容，请使用datalist元素。
编辑2：在HTML生活标准中find这个小知识：“每个选项元素是数据元素的后代…代表一个build议。
从技术angular度来看，它们完全不同。 <datalist>是其他元素的抽象容器。 在你的情况下，你已经使用它<input type="text"但你也可以使用它的范围，颜色，date等http://demo.agektmr.com/datalist/
如果将它与文本input一起使用，作为一种自动完成，那么问题就是：使用自由forms的文本input还是预先确定的选项列表更好？ 在这种情况下，我认为答案更为明显。
如果我们把注意力集中在使用<datalist>作为文本字段的选项列表，那么下面是一些特定的区别：
- 一个
<datalist>fed文本框在显示标签和提交时都有一个单独的string。 select框可以具有不同的提交值与显示标签<option value='ie'>Internet Explorer</option>。 - 一个
<datalist>fed文本框不支持选项组来组织显示。 - 您不能像使用
<select>一样将用户限制在<datalist>中的选项列表中。 - onchange事件的工作方式不同。 在
<select>元素上，onchange事件在更改后立即触发，而<input type="text"事件在元素失去焦点或用户按下回车后触发。 -
<datalist>在浏览器中确实有点支持。 显示所有可用选项的方式是不一致的，事情变得更糟。
最后一点真的是我认为的大问题。 由于您必须具有更通用的自动完成后备function，因此几乎没有理由去configuration<datalist>的麻烦。 再加上任何体面的自动完成的插件将允许方式来显示你的选项， <datalist>不这样做。 如果<datalist>接受了您可以操作的元素，但是您希望这样做，那将会非常棒！ 但不是。
此外，据我所知， <datalist>search是从string的开头精确匹配。 所以，如果你有<option value="internet explorer"> ，你search“资源pipe理器”，你会得到任何结果。 大多数自动完成插件将search文本中的任何地方。
我只使用<datalist>作为一些内部页面的快速和懒惰的便利帮手，我知道用户具有最新的Chrome或Firefox，并且不会尝试提交伪造的值。 对于任何其他情况，由于非常差的浏览器支持，很难推荐使用<datalist> 。
select和datalist之间还有一个重要的区别。 浏览器支持因素来了
与datalist相比，select被浏览器广泛支持。 请看这个页面以获得完整的datalist浏览器支持 –
Datalist浏览器支持
在所有浏览器中支持select（自IE6 +，Firefox 2+，Chrome 1 +等）
数据列表是支持HTML5的浏览器中的新HTML标记。 它呈现为带有一些选项列表的文本框。 对于性别文本框的例子，当您在文本框中input“M”或“F”时，它会给你select男性女性。
<input list="Gender"> <datalist id="Gender"> <option value="Male"> <option value="Female> </datalist>
我注意到datalist中没有select的function。 它只给你select，但不能有一个默认选项。 您无法在下一页显示选定的选项。
要具体回答您的问题的一部分“是否有任何情况下使用一个或另一个更好？”，考虑一个重复部分的forms。 如果重复部分包含许多select标记，则必须为每个select呈现每个行的选项。
在这种情况下，我会考虑使用datalist input ，因为相同的datalist可以用于任意数量的input 。 这可能会在服务器上节省大量的渲染时间，并且可以对任意数量的行进行缩放。
Datalist本身包含自动完成和build议，也可以允许用户inputbuild议中未定义的值。
select只会给你build议
它类似于select，但datalist有其他function，如自动build议。 您甚至可以在input时键入并查看build议。
用户也可以写出不在列表中的项目。
