前端外掛之Select2使用

運維咖啡吧發表於2019-07-30
前端

工欲善其事，必先利其器

本系列文章介紹我在運維繫統開發過程中用到的那些順手的前端外掛，上一篇文章介紹了bootstrap-duallistbox這個外掛的使用，這一篇開始Select2的征服之旅

Select2是一款基於JQuery的下拉選單外掛，主要用來優化select，支援單選和多選，同時也支援分組顯示、列表檢索、遠端獲取資料等眾多好用的功能

專案地址：https://select2.org/

基本使用

需要用到的JS和CSS檔案位於專案程式碼下的dist目錄中，需要將這個目錄中的對應檔案放入你的專案裡，這一步不贅述

  1. 引入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>
  1. 初始化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>
  1. 完成以上兩步可以看到頁面效果如下

前端外掛之Select2使用

設定提示語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,
});

顯示效果如下：

前端外掛之Select2使用

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

掃碼關注公眾號檢視更多實用文章

相關文章推薦閱讀：

相關文章