HTML-datalist-1.1

最新推荐文章于 2025-06-11 08:08:42 发布

彩舒

最新推荐文章于 2025-06-11 08:08:42 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： HTML datalist

本文链接：https://blog.youkuaiyun.com/caishu1995/article/details/94721198

前端技术专栏收录该内容

105 篇文章

订阅专栏

探讨了在不同浏览器如Firefox、Google Chrome和IE中使用HTML5 datalist元素的差异，包括显示行为、样式和响应性，以及如何根据用户输入动态生成下拉列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候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>

	google	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>

	google	firefox	IE
样式	可以同时展示value和内容	只能展示内容	只能展示内容
输入值	能从值和内容中查出	只能查出内容	只能查出值
单击选值后	展示值	展示值	展示值