use*_*984 122 forms html5 html-select html-datalist
我想知道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>
数据列表,期权
<input type=text list=browsers>
<datalist id=browsers>
<option value="Firefox">
<option value="IE">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
jam*_*iss 167
将其视为需求和建议之间的差异.对于select元素,用户需要选择您给出的选项之一.对于datalist元素,建议用户选择您给出的一个选项,但他实际上可以在输入中输入他想要的任何内容.
编辑1:您使用哪一个取决于您的要求.如果用户必须输入您的一个选项,请使用该select元素.如果使用可以输入任何内容,请使用该datalist元素.
编辑2:在HTML Living Standard中找到了这个小窍门:"每个选项元素是datalist元素的后代......代表一个建议."
mas*_*sta 60
从技术角度来看,它们完全不同.<datalist>是其他元素的选项的抽象容器.在你的情况下,你已经使用它,<input type="text"但你也可以使用范围,颜色,日期等.http://demo.agektmr.com/datalist/
如果将它与文本输入一起使用,作为一种自动完成,那么问题实际上是:使用自由格式文本输入或预定的选项列表是否更好？在那种情况下,我认为答案更明显一些.
如果我们专注于使用<datalist>文本字段的选项列表,那么这是一个选择框之间的一些具体差异:
<datalist>美联储文本框有两个显示标签,并提交一个字符串.选择框可以具有与显示标签不同的提交值<option value='ie'>Internet Explorer</option>.<datalist>美联储文本框不支持<optgroup>标签来组织显示屏.<datalist>像你可以用<select>.<select>元素上,onchange事件在更改时立即触发,而<input type="text"事件在元素失去焦点或用户按Enter后触发.<datalist>在各种浏览器中都非常支持.显示所有可用选项的方式不一致,事情只会变得更糟.在我看来,最后一点真的是最重要的一点.由于您将拥有更通用的自动完成回退,因此几乎没有理由遇到配置问题的麻烦<datalist>.此外,任何体面的自动完成插件都可以为您的选项显示设置样式,但<datalist>这样做并没有.如果您可以随意操作<datalist>可接受的<li>元素,那将非常棒!但不是.
另外,就我所知,<datalist>搜索是从字符串开头的完全匹配.所以,如果你有<option value="internet explorer">和你搜索'探险家'你将得不到任何结果.大多数自动完成插件都会搜索文本中的任何位置.
我只是<datalist>作为一个快速和懒惰的方便助手用于一些内部页面,我知道100%确定用户拥有最新的Chrome或Firefox,并且不会尝试提交虚假值.对于任何其他情况,<datalist>由于浏览器支持非常差,很难推荐使用.