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 相关文章推荐
js静态方法与实例方法分析
Jul 04 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
了解JavaScript中let语句
May 30 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
php时间不正确的解决方法
2008/04/09 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
Python中的装饰器用法详解
2015/01/14 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python 同时运行多个程序的实例
2019/01/07 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
三维科技面试题
2013/07/27 面试题
大学生入党自我鉴定
2013/10/31 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
自我推荐信范文
2014/05/09 职场文书
员工安全承诺书
2014/05/22 职场文书
庆六一活动总结
2014/08/29 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
岁月神偷观后感
2015/06/11 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
浅谈怎么给Python添加类型标注
2021/06/08 Python
HDFS免重启挂载新磁盘
2022/04/06 Servers