项目当中用了很多次了，因为疫情的原因，也没有总结过，趁着加班，总结一下，方便自己查找使用。
使用起来很简单，首先就是需要引入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自己看。