如何正確使用Select2多選功能

一、Select2 多選功能的介紹

Select2 是一個基於 jQuery 的選擇框插件，可以輕鬆定製和增強選擇框。它支持單選、多選、搜索、遠程數據等多種功能，其中多選功能是 Select2 的一個核心特性。

多選功能可以幫助用戶在一個固定大小的選擇框中選擇多個選項，而不必改變排列或擴展選擇框。Select2 多選功能提供了許多選項，包括：

• 在輸入框中輸入搜索詞後自動過濾選項
• 展示已選選項的標籤
• 允許用戶刪除已選選項
• 支持從靜態數據或遠程數據源中載入選項

二、Select2 多選功能的實現

實現 Select2 多選功能，需要引入 jQuery 庫和 Select2 庫。

以下是一個簡單的多選 Select2 示例：

  
    <input type="hidden" name="fruits[]"/>
    <select class="js-example-basic-multiple" name="fruits[]" multiple="multiple">
      <option value="apple">Apple</option>
      <option value="orange">Orange</option>
      <option value="banana">Banana</option>
      <option value="grape">Grape</option>
      <option value="watermelon">Watermelon</option>
    </select>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
    <script>
      $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
      });
    </script>
  

在上面的示例中，我們使用了兩個隱藏的 input 元素，一個是用於提交數據的 name=”fruits[]”，一個是用於向伺服器提交選項的值的 input 元素。這個元素在 Select2 中是必需的，因為它是提供選項值給伺服器的唯一方法。

同時，我們使用了一個 select 元素，其中 multiple 屬性設置為 multiple。這表示用戶可以選擇多個選項，而不是只能選一個。

當使用 Select2 插件時，在 JavaScript 文件中需要調用 select2() 函數，該函數初始化 select 元素，以便多選功能可用。

三、Select2 多選功能的定製化

Select2 的多選功能非常靈活，可以通過各種選項進行定製化。以下是一些常見的用法：

1. 開啟搜索框

Select2 中，搜索框是根據用戶輸入關鍵詞自動過濾選項的重要功能。要開啟搜索，請在 JavaScript 中設置 allowClear: true 選項。

  
    $('.js-example-basic-multiple').select2({
      allowClear: true
    });
  

2. 自定義標籤

Select2 默認將已選選項添加為標籤，這些標籤顯示在選擇框中。可以自定義標籤，例如添加自定義圖標或修改顏色。以下是一個示例，將 Select2 標籤與 Font Awesome 圖標集結合使用：

  
    function formatOption(option) {
      if (!option.id) {
        return option.text;
      }
      var url = "/path/to/icons/" + option.id.toLowerCase() + ".png";
      var $option = $(
        '<span><i class="fa fa-music"></i> ' + option.text + '</span>'
      );
      return $option;
    }

    $('.js-example-basic-multiple').select2({
      templateSelection: formatOption
    });
  

3. 引導用戶

有時，對用戶進行設置，以使他們理解應選擇哪些選項是很有幫助的。可以使用 placeholder 選項來為選擇框添加一條指示消息，以指導用戶處理選擇框。例如：

  
    $('.js-example-basic-multiple').select2({
      placeholder: 'Select a fruit'
    });
  

四、結論

Select2 多選功能是一種非常方便、靈活的選擇框功能，可以大大提高用戶對大量選項進行選擇時的體驗。通過前面所述的定製化選項可以增強此功能，以適應更廣泛的用戶需求。