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插件用法的更多相关文章

  1. 01:jQuery的下拉选select2插件用法

    1.1 select2插件基本使用 1.下载select2插件 1. 下载地址:https://github.com/select2/select2 2.官网地址:https://select2.or ...

  2. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  3. 在select2插件中append下拉选,点击没反应的解决

    今天前端大佬帮我解决了一个棘手的问题:克隆了已有系统的网页,尝试把复制下来的html改造成jsp.基本功能正常,然而点击新增按钮,出来的行无法点击下拉选,控制台也没报错. 项目用的是jeesite2. ...

  4. jQuery美化下拉菜单插件dropkick

    dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...

  5. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  6. 非常实用的select下拉框-Select2.js

    在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...

  7. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

  8. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  9. Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢)

    Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...

随机推荐

  1. golang介绍

    一.golang介绍  golang是Google开发的一种 静态强类型.编译型,并发型,并具有垃圾回收功能的编程语言. 二.语言特性 1..自动垃圾回收 2.支持函数多返回值 3.并发强 三.gol ...

  2. Flask的插件session、SQLAlchemy、Script、Migrate

    一.flask-session 1.为什么要使用flask-session 因为flask默认的session是通过请求上下文放入到Local中的,是存在内存的,而使用flask-session可以更 ...

  3. 基于JavaCv并发读取本地视频流并提取每帧32位dhash特征

    1.读取本地视频流,pom依赖 依赖于 org.bytedeco下的javacv/opencv/ffmpeg 包 <dependency> <groupId>org.byted ...

  4. Linux后台执行的方法 - 关闭、退出不影响

    =============================================================================================nohup c ...

  5. mybatis操作mysql的奇淫技巧总结(代码库)

    1.添加公共sql代码段 使用<sql> 和 <include> 标签 <sql id="userSubassemblyRecordParam"> ...

  6. 【BZOJ5507】[GXOI/GZOI2019]旧词(树链剖分,线段树)

    [BZOJ5507][GXOI/GZOI2019]旧词(树链剖分,线段树) 题面 BZOJ 洛谷 题解 如果\(k=1\)就是链并裸题了... 其实\(k>1\)发现还是可以用类似链并的思想,这 ...

  7. badboy安装及使用

    badboy下载 下载地址:http://www.badboy.com.au/download/index 直接点击[continue] badboy安装 badboy录制 默认是录制状态 访问sog ...

  8. CentOS7配置iptables防火墙

    CentOS 7中默认是firewalld防火墙,如果使用iptables需要先关闭firewalld防火墙(1.关闭防火墙,2.取消开机启动). #关闭firewalld systemctl sto ...

  9. WPF布局的应用

    一 写在开头1.1 本文内容本文主要内容是使用WPF来实现几个简单的界面. 二 登录窗口小例子2.1 实现代码XAML代码: <Window x:Class="LoginDialog. ...

  10. 第十九节: 结合【表达式目录树】来封装EF的BaseDal层的方法

    一. 简介 该章节,可以说是一个简单轻松的章节,只要你对Expression表达式树.EF的基本使用.泛型有所了解,那么本章节实质上就是一个非常简单的封装章节,便于我们快捷开发. PS:在该章节对于E ...