用H5实现下拉框

原创于 2017-06-30 17:47:22 发布 · 1w 阅读

CC 4.0 BY-SA版权

本文介绍了如何使用HTML5的list属性和datalist标签创建下拉框效果。通过在input框中设置list属性，结合自定义id的datalist元素及option标签，可以轻松实现带有提示信息的下拉选项功能。

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

可以使用HTML5 list 属性。list 属性需要应用到 input 框上，然后内容写一个自定义的 id
然后在任意位置放一对 datalist 标签，并给 datalist 框一个 id，和 list 属性指向的 id 一致即可。
在 datalist 标签下放列表项，每个列表项用 option 元标签来表示，option 标签里用 value 属性填写内容，label 属性来做提示。
下面是示例代码：
<form action="">
 <input type="text" list="url_list" name="text" />
 <input type="submit" />
</form>
<datalist id="url_list">
 <option label="HZ赫兹工作室" value="http://weibo.com/hz421247910" />
 <option label="提示1" value="列表项1" />
 <option label="提示2" value="列表项2" />
 <option label="" value="列表项3" />
</datalist>