jQuery的下拉选select2插件用法

用了这么久的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下拉框效果汇总进行学习。

 

 

1、问题背景

     select2搜索下拉框，当满足某种条件时，让它默认选中空值

 

2、问题原因

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>select2默认选择空值</title>  
  6. <link rel="stylesheet" href="../css/select2.css" />   
  7. <script src="../js/jquery-3.2.1.js"></script>  
  8. <script src="../js/select2.js"></script>  
  9. <script>  
  10.     $(function(){  
  11.         $("#selectNull").select2();  
  12.           
  13.         $("#selectNull").on("select2:select",function(){  
  14.             var data = $(this).val();  
  15.             if(data=="3")  
  16.             {  
  17.                 $("#selectNull").val("");  
  18.             }  
  19.         });  
  20.     });  
  21. </script>  
  22. </head>  
  23. <body>  
  24.    <div>  
  25.         <select id="selectNull" class="js-example-basic-single" style="width:400px;">  
  26.             <option value=""></option>  
  27.             <option value="1">AA</option>  
  28.             <option value="2">BB</option>  
  29.             <option value="3">CC</option>  
  30.             <option value="4">DD</option>  
  31.             <option value="5">EE</option>  
  32.             <option value="6">FF</option>  
  33.         </select>  
  34.    </div>  
  35. </body>  
  36. </html>  

     如果直接利用$("#selectNull").val(""); 发现效果不佳；

     或者利用$("#selectNull").select2.select2.("val","");也不行

 

3、解决办法

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>select2默认选择空值</title>  
  6. <link rel="stylesheet" href="../css/select2.css" />   
  7. <script src="../js/jquery-3.2.1.js"></script>  
  8. <script src="../js/select2.js"></script>  
  9. <script>  
  10.     $(function(){  
  11.         $("#selectNull").select2();  
  12.           
  13.         $("#selectNull").on("select2:select",function(){  
  14.             var data = $(this).val();  
  15.             if(data=="3")  
  16.             {  
  17.                 $("#selectNull").val("").select2();  
  18.             }  
  19.         });  
  20.     });  
  21. </script>  
  22. </head>  
  23. <body>  
  24.    <div>  
  25.         <select id="selectNull" class="js-example-basic-single" style="width:400px;">  
  26.             <option value=""></option>  
  27.             <option value="1">AA</option>  
  28.             <option value="2">BB</option>  
  29.             <option value="3">CC</option>  
  30.             <option value="4">DD</option>  
  31.             <option value="5">EE</option>  
  32.             <option value="6">FF</option>  
  33.         </select>  
  34.    </div>  
  35. </body>  
  36. </html>  

    使用$("#selectNull").val("").select2(); 这样才有效

posted on 2018-06-25 12:05  大西瓜3721  阅读(713)  评论(0)  编辑  收藏  举报

导航