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 相关文章推荐
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
javascript冒泡排序小结
Apr 10 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
JS阻止事件冒泡的方法详解
Aug 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
如何给phpadmin一个保护
2006/10/09 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
解析strtr函数的效率问题
2013/06/26 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
PHP反射实际应用示例
2019/04/03 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
Python对excel文档的操作方法详解
2018/12/10 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
教师求职推荐信范文
2013/11/20 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
学校节能减排倡议书
2014/05/16 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书