jQuery的下拉选select2插件用法
1转自:https://www.jb51.net/article/95561.htm
用了这么久的Select2插件,也该写篇文章总结总结。当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件。
在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要好看一些,本文针对新版本。
演示:
由于博客系统的原因,所以只能演示简单的功能。
一.文件需要引入select2.full.js、select2.min.css(4.0.1版本)和jquery.1.8.3及以上
最新版本的select2如果引用的jquery版本较低的话,某些功能无法正常使用。比如:清除功能allowClear: true
最新版本请使用<select></select>标签(对于本地化的数据你可以使用input,但ajax远程数据必须使用select)
二.placeholder
placeholder占位提示文字,如果需要清楚功能,则必须设置placeholder。
三.加载本地数据
select2默认的数据属性是id、text,新版本可以自定义,但还是用默认的比较好。所以提供的json中最好转换为id、text形式,当然可以添加其他属性。
1
2
3
4
5
6
|
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; $( "#c01-select" ).select2({ data: data, placeholder: '请选择' , allowClear: true }) |
四.加载远程数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
$( "#c01-select" ).select2({ ajax: { url: "data.json" , dataType: 'json' , delay: 250, data: function (params) { return { q: params.term, }; }, processResults: function (data) { return { results: data }; }, cache: true }, escapeMarkup: function (markup) { return markup; }, minimumInputLength: 1, templateResult: formatRepo, templateSelection: formatRepoSelection }); |
说明:
1.q: params.term 查询参数(params.term表示输入框中内容,q发生到服务器的参数名;所以这里你可以添加自定义参数,如:stype:'person')
2.processResults中results: data返回数据(返回最终数据给results,如果我的数据在data.res下,则返回data.res。这个与服务器返回json有关)
3.minimumInputLength 最小需要输入多少个字符才进行查询,与之相关的maximumSelectionLength表示最大输入限制。
4.escapeMarkup字符转义处理
5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里,当然你可以return repo.text+"1";等
6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}
7.关于返回的 json的格式:select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}],新版严格要求这样的格式,当然你可以添加列,如:[{id:1,text:'text',name:'liu'}]
五.获取选中项
1
2
3
4
5
6
7
8
9
10
|
var res=$( "#c01-select" ).select2( "data" )[0] ; //单选 var reslist=$( "#c01-select" ).select2( "data" ); //多选 if (res==undefined) { alert( "你没有选中任何项" ); } if (reslist.length) { alert( "你选中任何项" ); } |
六.清空选择项和设置不可用
1
2
3
4
5
6
7
|
//清空选择 $( "#c01-select" ).val( null ).trigger( "change" ); $( "#c01-select" ).val( "你的placeholder" ).trigger( "change" ); //或者 //如果你使用的是input标签(默认就是本地数据),你可以用$("#c01-select").val('');来清空选项 //disabled $( "#c01-select" ).prop( "disabled" , false ); //可用 $( "#c01-select" ).prop( "disabled" , true ); //不可用 |
七.启用多选
1
2
3
4
|
$( "#c01-select" ).select2({ data:data, multiple: true }); |
多选演示:
八.下面简单说明新版与老版对比
1.结果回调和选中回调名称:formatResult、formatSelection(老版);templateResult、templateSelection(新版)
2.初始化:
1
2
3
4
5
6
7
8
9
10
11
|
//老版,注意如果初始化时文本框中本身没有值(为空),则不会触发该方法 initSelection: function (element, callback) { var id = $(element).val(); var data = { id: id, text: id}; //这里是初始化的数据,你可以通过id来从服务器上获取(ajax),再装载进去 callback(data); } //新版,直接给select添加option $( "#id" ).append( new Option( "Jquery" , 10001, false , true )); //或者 $( "#id" ).append( "<option value='10001'>Jquery</option>" ); |
3.获取或设置值:select2("val")(老版);$("select").val()(新版)
推荐使用
1
2
|
var res = $( "#id" ).select2( "data" ); //返回数组,单选就取res[0];好处是不进可以获取id、text还可以获取其他属性,如res[0].names |
4.停用或启用:$("select").enable(false);(老版);$("select").prop("disabled", true);(新版)
5.主题样式:新版的样式已经更新,但如果想使用老版样式则可以设置 theme: "classic"
如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。
jQuery的下拉选select2插件用法的更多相关文章
- 01:jQuery的下拉选select2插件用法
1.1 select2插件基本使用 1.下载select2插件 1. 下载地址:https://github.com/select2/select2 2.官网地址:https://select2.or ...
- 基于jQuery select下拉框美化插件
分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 源码下 ...
- 在select2插件中append下拉选,点击没反应的解决
今天前端大佬帮我解决了一个棘手的问题:克隆了已有系统的网页,尝试把复制下来的html改造成jsp.基本功能正常,然而点击新增按钮,出来的行无法点击下拉选,控制台也没报错. 项目用的是jeesite2. ...
- jQuery美化下拉菜单插件dropkick
dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- 非常实用的select下拉框-Select2.js
在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...
- Jquery操作下拉框(DropDownList)实现取值赋值
Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...
- jQuery对下拉框Select操作总结
jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...
- Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢)
Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...
随机推荐
- golang介绍
一.golang介绍 golang是Google开发的一种 静态强类型.编译型,并发型,并具有垃圾回收功能的编程语言. 二.语言特性 1..自动垃圾回收 2.支持函数多返回值 3.并发强 三.gol ...
- Flask的插件session、SQLAlchemy、Script、Migrate
一.flask-session 1.为什么要使用flask-session 因为flask默认的session是通过请求上下文放入到Local中的,是存在内存的,而使用flask-session可以更 ...
- 基于JavaCv并发读取本地视频流并提取每帧32位dhash特征
1.读取本地视频流,pom依赖 依赖于 org.bytedeco下的javacv/opencv/ffmpeg 包 <dependency> <groupId>org.byted ...
- Linux后台执行的方法 - 关闭、退出不影响
=============================================================================================nohup c ...
- mybatis操作mysql的奇淫技巧总结(代码库)
1.添加公共sql代码段 使用<sql> 和 <include> 标签 <sql id="userSubassemblyRecordParam"> ...
- 【BZOJ5507】[GXOI/GZOI2019]旧词(树链剖分,线段树)
[BZOJ5507][GXOI/GZOI2019]旧词(树链剖分,线段树) 题面 BZOJ 洛谷 题解 如果\(k=1\)就是链并裸题了... 其实\(k>1\)发现还是可以用类似链并的思想,这 ...
- badboy安装及使用
badboy下载 下载地址:http://www.badboy.com.au/download/index 直接点击[continue] badboy安装 badboy录制 默认是录制状态 访问sog ...
- CentOS7配置iptables防火墙
CentOS 7中默认是firewalld防火墙,如果使用iptables需要先关闭firewalld防火墙(1.关闭防火墙,2.取消开机启动). #关闭firewalld systemctl sto ...
- WPF布局的应用
一 写在开头1.1 本文内容本文主要内容是使用WPF来实现几个简单的界面. 二 登录窗口小例子2.1 实现代码XAML代码: <Window x:Class="LoginDialog. ...
- 第十九节: 结合【表达式目录树】来封装EF的BaseDal层的方法
一. 简介 该章节,可以说是一个简单轻松的章节,只要你对Expression表达式树.EF的基本使用.泛型有所了解,那么本章节实质上就是一个非常简单的封装章节,便于我们快捷开发. PS:在该章节对于E ...