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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
html5调用摄像头截图功能
Jan 18 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
操作Oracle的php类
2006/10/09 PHP
如何使用Strace调试工具
2013/06/03 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
领导班子个人对照检查剖析材料
2014/09/29 职场文书
幼儿园感谢信
2015/01/21 职场文书
天坛导游词
2015/02/02 职场文书