有时候select已经不能满足我们的需求了。
有时候因为框架的原因,框架内的select会要求我们固定是下拉框的选项。但很多时候我们需要根据用户的选择,去数据库中查询我们的数据值,并返回前端,动态生成下拉框的内容。这时候在不影响系统的前提下,我们会选择动态生成datalist去动态展示数据。
另一方面,select会一口气展示所有的选项,但我们希望根据用户输入的内容,选择性的展示选项,这时候我们也会使用datalist。
<!DOCTYPE HTML>
<html>
<body>
<input list="data" />
<datalist id="data">
<option value="11">aa</option>
<option value="12">bb</option>
<option value="13">cc</option>
</datalist>
</body>
</html>
首先我们需要一个input,给他绑定list属性,list值为datalist的id值。然后我们需要有一个datalist,并给予他一个id。而option和/option之内的值为展示的内容。
Firefox Google IE差异
我一直以为各个浏览器对于datalist差异只存在于样式上,结果差异还是有很多的。下面用几个例子来说明。
例子1
<input type="text" id="field9877" list="field9877_1">
<datalist id="field9877_1">
<option value="1"></option>
<option value="12"></option>
<option value="2"></option>
</datalist>
firefox | IE | ||
---|---|---|---|
单击获得焦点 | 能展示所有当前值 | 没反应,不会展示当前值 | 同谷歌的效果 |
双击获得焦点 | 能展示所有当前值 | 同谷歌的效果 | 同谷歌的效果 |
有值 | 能展示包含此值的选项 | 同谷歌的效果 | 同谷歌的效果 |
删除值后 | 无效果 | 同谷歌的效果 | 展示所有值 |
删除值后再单击 | 能展示所有当前值 | 同谷歌的效果 | 同谷歌的效果 |
例子2
<input type="text" id="field9877" list="field9877_1">
<datalist id="field9877_1">
<option>1</option>
<option>12</option>
<option>2</option>
</datalist>
差异同上
例子3
<input type="text" id="field9877" list="field9877_1">
<datalist id="field9877_1">
<option value="1">AA</option>
<option value="12">BB</option>
<option value="2">CC</option>
<option value="A">DD</option>
</datalist>
firefox | IE | ||
---|---|---|---|
样式 | 可以同时展示value和内容 | 只能展示内容 | 只能展示内容 |
输入值 | 能从值和内容中查出 | 只能查出内容 | 只能查出值 |
单击选值后 | 展示值 | 展示值 | 展示值 |
例子4
firefox | IE | ||
---|---|---|---|
样式 | 不一定等宽 | 等宽 | 接近等宽 |
通过以上几部分的对比,你们看出差异了么。使用的时候要小心哦。