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 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
vue组件系列之TagsInput详解
May 14 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实例分享之html转为rtf格式
2014/06/02 PHP
php比较相似字符串的方法
2015/06/05 PHP
php简单防盗链实现方法
2015/07/29 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
js Map List 遍历使用示例
2013/07/10 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
Python开发常用的一些开源Package分享
2015/02/14 Python
Python去除列表中重复元素的方法
2015/03/20 Python
python连接字符串的方法小结
2015/07/13 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
python的flask框架难学吗
2020/07/31 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
房屋出租委托书格式
2014/09/23 职场文书
2014年检验科工作总结
2014/11/22 职场文书