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 相关文章推荐
javascript jQuery插件练习
Dec 24 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
js实现动态增加文件域表单功能
Oct 22 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
js实现简单五子棋游戏
May 28 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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字符串过滤,转换函数代码
2012/05/01 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
初识php MVC
2014/09/10 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
PHP 断点续传实例详解
2017/11/11 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
用js实现小球的自由移动代码
2013/04/22 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
python退出命令是什么?详解python退出方法
2018/12/10 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
2014年教师培训的自我评价
2014/01/03 职场文书
高中运动会广播稿
2014/01/21 职场文书
庆七一宣传标语
2014/10/08 职场文书
怎样写离婚协议书
2015/01/26 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
会议营销主持词
2015/07/03 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
公司员工培训管理制度
2015/08/04 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python