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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
javascript实现时钟动画
Dec 03 Javascript
canvas多重阴影发光效果实现
Apr 20 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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
python返回昨天日期的方法
2015/05/13 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
python去除扩展名的实例讲解
2018/04/23 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
python mock测试的示例
2020/10/19 Python
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
活动总结书
2014/05/08 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
助理政工师申报材料
2014/06/03 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android