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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
AJAX检测用户名是否存在的方法
Mar 24 Javascript
深入详解JS函数的柯里化
Jun 09 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
一个实用的php验证码类
2017/07/06 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
js数组的基本使用总结
2021/01/18 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
python实现挑选出来100以内的质数
2015/03/24 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
C/C++程序员常见面试题一
2012/12/08 面试题
六一节目主持词
2014/04/01 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
php实例化对象的实例方法
2021/11/17 PHP