項目當中用了很多次了，因為疫情的原因，也沒有總結過，趁着加班，總結一下，方便自己查找使用。
使用起來很簡單，首先就是需要引入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自己看。