工欲善其事，必先利其器
本系列文章介紹我在運維系統開發過程中用到的那些順手的前端插件，上一篇文章介紹了bootstrap-duallistbox這個插件的使用，這一篇開始Select2的征服之旅
Select2是一款基於JQuery的下拉列表插件，主要用來優化select，支持單選和多選，同時也支持分組顯示、列表檢索、遠程獲取數據等眾多好用的功能
項目地址：https://select2.org/
基本使用
需要用到的JS和CSS文件位於項目代碼下的dist目錄中，需要將這個目錄中的對應文件放入你的項目里，這一步不贅述
- 引入CSS/JS文件，由於Select2是基於Jquery的，所以要先引入Jquery，這里我們都直接引入CDN的地址
<!-- 加載 Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- 加載 Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
- 初始化Select2
<select class="form-control" id="id_select2_demo1">
<option value="">-----單選-----</option>
<option value="1">OPS-COFFEE-A</option>
<option value="2">OPS-COFFEE-B</option>
<option value="3">OPS-COFFEE-C</option>
<option value="4">OPS-COFFEE-D</option>
<option value="5">OPS-COFFEE-E</option>
<option value="6">OPS-COFFEE-F</option>
<option value="7">OPS-COFFEE-G</option>
</select>
<script>
var selectorx = $('#id_select2_demo1').select2();
</script>
- 完成以上兩步可以看到頁面效果如下
設置提示語placeholder
$('#id_select2_demo1').select2({
placeholder: '請選擇'
});
placeholder： 選擇框的提示語，需要注意，要想讓這個提示語生效，需要select的option里邊有一個value為空的option，例如上邊例子中的
<option value="">-----單選-----</option>
隱藏搜索框
與默認的select除了樣式上的區別外，最重要的是多了個搜索框，能用來搜索option項，如果你不想顯示這個搜索框，可以通過設置項minimumResultsForSearch隱藏
var selectorx = $('#id_select2_demo1').select2({
minimumResultsForSearch: -1
});
加載本地數據
除了實例化已經存在的select之外，也可以通過設置項data加載本地數據
var sdata = [
{id: 1, text:'OPS-COFFEE-1'},
{id: 2, text:'OPS-COFFEE-2'},
{id: 3, text:'OPS-COFFEE-3'}
]
$('#id_select2_demo2').select2({
data: sdata
});
select2能夠加載的數據格式如上，需要兩個數據屬性id和text，當然你也可以加載其他的額外屬性以在需要時獲取
加載遠程數據
除了加載本地數據外，也支持ajax異步去后端獲取數據，用法如下：
$('#id_select2_demo3').select2({
placeholder: 'Ajax后端獲取數據示例',
ajax: {
url: "sdata.json",
dataType: 'json',
delay: 250,
data: function (params) {
return {
search: params.term,
};
},
processResults: function (data) {
return {
results: data
};
},
cache: true
},
minimumInputLength: 2
});
delay: 250： 配置告訴select2在用戶停止輸入多少毫秒后開始查詢，合理設置可以避免頻繁向后端發送請求
search: params.term： 定義了要傳遞給后端的查詢參數，search為發送到服務端的參數名，params.term表示輸入框中輸入的內容，當然這里也可以添加一些自定義的參數，例如：
data: function (params) {
return {
search: params.term,
site: "https://ops-coffee.cn"
};
},
那么當你輸入OPS時，服務端接受到的完整參數就是/sdata.json?search=OPS&site=https://ops-coffee.cn
results: data： 定義了后台返回的數據，其中data為select2能夠識別的格式，如果后端返回的格式不是select2能夠識別的格式，例如下邊這樣
{
"state": 1,
"message":[
{"id": 0, "text":"-----單選-----"},
{"id": 1, "text":"OPS-COFFEE-1"},
{"id": 2, "text":"OPS-COFFEE-2"},
{"id": 3, "text":"OPS-COFFEE-3"}
]
}
那么你需要先將其處理成select2能夠識別的格式，這里我們就需要取出date中的message
processResults: function (data) {
return {
results: data.message
};
},
minimumInputLength： ajax異步請求通常我們會配合配置項minimumInputLength使用，這個配置項的意思是輸入指定長度的字符后開始搜索，也就是點擊select選擇框默認不會去后台請求數據，當你輸入指定長度的字符時才會去搜索，這樣在你搜索項非常多的時候能更精確的匹配你想要的內容
如果你想點擊即顯示所有option，那么你可以將他的值設置為0，或者不配置這個配置
同時也可以通過maximumInputLength配置項配置輸入字符的最大長度
多選支持
select2對多選的支持也非常簡單，跟默認的select標簽一樣只需要在select標簽中添加multiple="multiple"即可
<select class="form-control" id="id_select2_demo4" multiple="multiple">
<option value="1">OPS-COFFEE-A</option>
<option value="3">OPS-COFFEE-C</option>
<option value="4">OPS-COFFEE-D</option>
<option value="5">OPS-COFFEE-E</option>
</select>
var selectory = $('#id_select2_demo4').select2({
placeholder: '請選擇，最多選擇三個',
allowClear: true,
maximumSelectionLength:3,
});
顯示效果如下：
allowClear： 是否顯示清楚按鈕，默認false，如果設置為true，需要同時配置placeholder，否則可能會引起js報錯：
TypeError: Cannot read property 'id' of undefined
maximumSelectionLength： 配置最多能選擇多少項
配置說明
另外還有幾個配置上邊沒有講到的：
width： 寬度，例如100%
multiple： 是否支持多選，默認false
closeOnSelect： 是否選中后關閉選擇框，默認true
tags： 是否可以動態創建選項
disabled： 是否禁用
debug： 是否開啟debug模式
使用進階
獲取已選擇的值，無論是單選還是多選都可以用下邊的代碼來獲取選擇的option
$('#id_select2_demo4').select2('val')
獲取已選擇的對象
$("#id_select2_demo4").select2("data")
如果想要拿到已選擇option的text值，可以通過如下方法，以下代碼中的[0]用來獲取第一個對象，對單選合適，如果是多選的話需要循環獲取
$("#id_select2_demo4").select2("data")[0].text
selected，初始化值，設置選中項
# 單選情況下val為數字，這里的selectx為
$("#id_select2_demo1").val(2).trigger("change");
# 多選情況下val為列表
$("#id_select2_demo4").val([2,3,5]).trigger("change");
清空已選擇的值，無論是單選還是多選都可以這樣清除
$("#id_select2_demo1").val(null).trigger('change');
$("#id_select2_demo4").val(null).trigger('change');
禁用select2
$("#id_select2_demo1").prop('disabled',true);;
$("#id_select2_demo4").prop('disabled',true);;
動態添加select的option
$('#add').click(function() {
var _html = '<option value="9" selected>ops-coffee.cn</option>';
$('#id_select2_demo1').append(_html).trigger('change.select2');
$('#id_select2_demo1').select2("open");
})
change.select2： 新增select數據后觸發select2更新
.select2("open")： 打開select，open改為close可動態關閉select，改為destroy可銷毀select2，恢復select默認樣式
完整Demo
為了方便大家學習，我寫了個完整的demo，你可以在線查看效果或下載代碼應用到自己的項目中
在線Demo地址：https://demo.ops-coffee.cn/select2/
Github源碼地址：https://github.com/ops-coffee/demo/tree/master/select2
相關文章推薦閱讀：