项目当中用了很多次了,因为疫情的原因,也没有总结过,趁着加班,总结一下,方便自己查找使用。
使用起来很简单,首先就是需要引入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>
如果大家需要更加复杂的方法, 可以去他的github自己看。