jQuery中select与datalist制作下拉菜单时的区别浅析


Posted in Javascript onDecember 30, 2016

一般我们通常使用select制作下拉菜单,但是H5之后,datalist也可以充当select的角色,而且两者还有一点小的不同。

对于select来说,select的下拉菜单是供用户选择的,用户只能选择其中的选项不能自己添加。

但是datalist就不同了,datalist不仅可以供用户选择,用户还可以自己输入,而且datalist还可以达到模糊匹配的效果,使用很方便。

据代码示例如下:

<input type="text" list="addr"/> 
      <datalist id="addr"> 
        <option value="上海">上海</option> 
        <option value="北京">北京</option> 
        <option value="杭州">杭州</option> 
      </datalist> 
       
      <select> 
        <option value="上海">上海</option> 
        <option value="北京">北京</option> 
        <option value="杭州">杭州</option> 
      </select>

运行结果如下:

jQuery中select与datalist制作下拉菜单时的区别浅析

以上所述是小编给大家介绍的jQuery中select与datalist制作下拉菜单时的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
JS实现全屏的四种写法
Dec 30 #Javascript
js设置文字颜色的方法示例
Dec 30 #Javascript
Node.js的Mongodb使用实例
Dec 30 #Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 #Javascript
原生JS实现图片左右轮播
Dec 30 #Javascript
零基础轻松学JavaScript闭包
Dec 30 #Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 #Javascript
You might like
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
javascript的this关键字详解
2019/05/20 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
python数字类型math库原理解析
2020/03/02 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
C#面试常见问题
2013/02/25 面试题
大学新生欢迎词
2014/01/10 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
鲁迅故居导游词
2015/02/05 职场文书
地道战观后感2000字
2015/06/04 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android