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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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中防止伪造跨站请求的小招式
2011/09/02 PHP
php实现文件编码批量转换
2014/03/10 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php删除指定目录的方法
2015/04/03 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
vuejs如何配置less
2017/04/25 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
express.js中间件说明详解
2019/03/19 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python内置模块turtle绘图详解
2017/12/09 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
军训感想500字
2014/02/20 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
连锁超市项目计划书
2014/09/15 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
php中pcntl_fork详解
2021/04/01 PHP
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python