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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
JS实现炫酷轮播图
Nov 15 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输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
vue的for循环使用方法
2019/02/12 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python 解析html之BeautifulSoup
2009/07/07 Python
Python设计模式之代理模式实例
2014/04/26 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
python try 异常处理(史上最全)
2019/03/07 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
python从Oracle读取数据生成图表
2020/10/14 Python
大学生蛋糕店创业计划书
2014/01/13 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
公司捐款倡议书
2014/05/14 职场文书
超市店庆活动方案
2014/08/31 职场文书
给朋友的赠语
2015/06/23 职场文书
会议室管理制度范本
2015/08/06 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
《火烧云》教学反思
2016/02/23 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
浅谈Redis缓冲区机制
2022/06/05 Redis