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 ajax获取网站Alexa排名的代码
Dec 12 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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 远程关机操作的代码
2008/12/05 PHP
PHP里的单例类写法实例
2015/06/25 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
jQuery提交多个表单的小例子
2013/06/30 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
详解Python的Django框架中的模版继承
2015/07/16 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
python将txt文件读取为字典的示例
2018/12/22 Python
python实现人机五子棋
2020/03/25 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
Pycharm中如何关掉python console
2020/10/27 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
天巡全球:Skyscanner Global
2017/06/20 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers