如何使用HTML5中的datalist并使用jquery获取值

2025-05-12 00:31:41

1、第一步，在HBuilder工具中，新建datalist.html静态页面；然后引入jquery核心文件，如下图所示：

2、第二步，在<body></body>标签元素内，插入一个input和datalist标签，如下图所示：

3、第三步，保存代码并在浏览器中，查看界面效果，可以发现类似一个下拉框，如下图所示：

4、第四步，点击datalist标签，会发现出现下拉框中的选项，效果与下拉框一样，如下图所示：

5、第五步，接着在<script></script>标签内，获取datalist标签的ID，获取change事件，如下图所示：

6、第六步，再次保存代码并查看界面效果，并切换datalist标签元素，查看对应的值，如下图所示：

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。