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对象和DOM对象的相互转化实现代码
Mar 02 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
jQuery选择器基础入门教程
May 10 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 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
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
理解javascript正则表达式
2016/03/08 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python删除文件示例分享
2014/01/28 Python
Python入门篇之正则表达式
2014/10/20 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
python使用插值法画出平滑曲线
2018/12/15 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
数据管理员的自我评价分享
2013/11/15 职场文书
教师个人自我鉴定
2014/02/08 职场文书
校运会入场式解说词
2014/02/10 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
公司活动总结范文
2014/07/01 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
php双向队列实例讲解
2021/11/17 PHP