daniao11417

  项目当中用了很多次了,因为疫情的原因,也没有总结过,趁着加班,总结一下,方便自己查找使用。

  使用起来很简单,首先就是需要引入css和js就行了(select2是基于jQuery,所以需要提前引入);请看下面的基本接口

  

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css"/>
 7         <style type="text/css">
 8             #color{
 9                 width: 300px;
10             }
11         </style>
12     </head>
13     <body>
14         <select name="" id="color" multiple="multiple">
15             <option value="">请选择颜色</option>
16             <option value="red">红色</option>
17             <option value="green">绿色</option>
18             <option value="blue">蓝色</option>
19             <option value="yellow">黄色</option>
20         </select>
21     </body>
22     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
23     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" type="text/javascript" charset="utf-8"></script>
24     <script type="text/javascript">
25         //初始化select2
26         $("#color").select2();
27     </script>
28 </html>

这里需要注意得到地方就是,select标签,需要添加一个multiple属性,如果不添加的话,页面的效果是不正确的。

我们添加完成之后,需要给多选框初始化,最简单的初始化方法就是,使用jq标签,然后直接select2()就可以了。

  下面说下怎么获取选中的值,给多选框赋值,清空值。

  获取选中的值:

  

1 var color_value = $("#color").val();
2 console.log(color_value);

需要注意的一点就是,因为是多选,所以获取的值是一个数组。如果没有选中值,则获取到的就是一个空数组。

  多选框赋值:

1     $("#color").val(["red","blue"]).trigger("change");

也是非常的简单,就是赋值的时候,我们也是需要把这个复制对象改成数组,然后后面添加一个.trigger("change");就可以了。

  清空值:

1 $("#color").val([]).trigger("change");

下面把完整的代码写在下面。大家可以直接粘贴到编辑器中运行

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css"/>
 7         <style type="text/css">
 8             #color{
 9                 width: 300px;
10             }
11         </style>
12     </head>
13     <body>
14         <select name="" id="color" multiple="multiple">
15             <option value="">请选择颜色</option>
16             <option value="red">红色</option>
17             <option value="green">绿色</option>
18             <option value="blue">蓝色</option>
19             <option value="yellow">黄色</option>
20         </select>
21         <button id="get_value">获取选中的值</button>
22         <button id="pull_value">红色和蓝色选中</button>
23         <button id="zero_value">清空值</button>
24     </body>
25     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
26     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" type="text/javascript" charset="utf-8"></script>
27     <script type="text/javascript">
28         //初始化select2
29         $("#color").select2();
30         
31         //获取选中的值
32         $("#get_value").click(function(){
33             var color_value = $("#color").val();
34             console.log(color_value);
35         })
36         // 给多选框赋值
37         $("#pull_value").click(function(){
38             $("#color").val(["red","blue"]).trigger("change");
39         })
40         // 清空
41         $("#zero_value").click(function(){
42             $("#color").val([]).trigger("change");
43         })
44     </script>
45 </html>
View Code

如果大家需要更加复杂的方法, 可以去他的github自己看

分类:

技术点:

相关文章: