首页 > 软件开发 > JavaScript >

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

来源:互联网 2023-03-16 23:58:20 378

在HTML5中,新加了一个标签datalist,这个标签是定义选项列表。datalist元素需要使用input标签元素结合使用,这个标签跟select下拉框很相似。下面利用一个实例讲述datalist标签的用法,操作如下:YwQ办公区 - 实用经验教程分享!

如何使用HTML5中的datalist并使用jquery获取值YwQ办公区 - 实用经验教程分享!

工具/原料

  • HTML5
  • CSS3
  • JavaScript
  • HBuilder
  • 浏览器
  • 截图工具

方法/步骤

  • 1

    第一步,在HBuilder工具中,新建datalist.html静态页面;然后引入jquery核心文件,如下图所示:YwQ办公区 - 实用经验教程分享!

    如何使用HTML5中的datalist并使用jquery获取值YwQ办公区 - 实用经验教程分享!

  • 1该信息未经授权抓取自百度经验
  • 2

    第二步,在body>/body>标签元素内,插入一个input和datalist标签,如下图所示:YwQ办公区 - 实用经验教程分享!

    如何使用HTML5中的datalist并使用jquery获取值YwQ办公区 - 实用经验教程分享!

  • 3

    第三步,保存代码并在浏览器中,查看界面效果,可以发现类似一个下拉框,如下图所示:YwQ办公区 - 实用经验教程分享!

    如何使用HTML5中的datalist并使用jquery获取值YwQ办公区 - 实用经验教程分享!

  • 4

    第四步,点击datalist标签,会发现出现下拉框中的选项,效果与下拉框一样,如下图所示:YwQ办公区 - 实用经验教程分享!

    如何使用HTML5中的datalist并使用jquery获取值YwQ办公区 - 实用经验教程分享!

  • 5

    第五步,接着在script>/script>标签内,获取datalist标签的ID,获取change事件,如下图所示:YwQ办公区 - 实用经验教程分享!

    如何使用HTML5中的datalist并使用jquery获取值YwQ办公区 - 实用经验教程分享!

  • 6

    第六步,再次保存代码并查看界面效果,并切换datalist标签元素,查看对应的值,如下图所示:YwQ办公区 - 实用经验教程分享!

    如何使用HTML5中的datalist并使用jquery获取值YwQ办公区 - 实用经验教程分享!

  • 注意事项

    • 注意HTML5中新增标签datalist的用法
    • 注意使用jquery获取datalist选中的值

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!YwQ办公区 - 实用经验教程分享!


    标签: HTMLJQUERYJAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码