如何以編程方式添加OPTGROUP來選擇2

Question

我加入選項值到預初始化選擇2對象是這樣的：

function updateFilter() { 
    var $element = $("#filter"); 
    var counterOption = 0; 
    Object.keys(genderMap).forEach(function (key) { 
     if (key !== "null") { 
      var $option = $("<option></option>"); 
      $option.val(counterOption); 
      $option.text(key); 
      $element.append($option); 
      counterOption = counterOption + 1; 
     } 
    }); 
    $element.trigger("change"); 
} 

我需要從其他字典添加更多的價值，所以我的目標是把選擇從optgroup標籤內的不同地圖，以幫助用戶瞭解什麼樣的價值屬於哪個組。

我發現了一些東西，但所有這些答案都依賴於JSON。什麼是添加optgroup標籤的正確方法？

Answer 1

官方文檔向您展示瞭如何使用插件的data選項添加<optgroup>和<option>標籤。 https://select2.github.io/options.html#how-should-nested-results-be-formatted

在你的情況，我會接近像這樣：

function updateFilter() { 
    var $element = $("#filter"); 
    var counterOption = 0; 

    // prepare your new data object 
    var data = [ 
     { 
     text: 'OptGroup 1: Gender', 
     children: Object.keys(genderMap).filter(filterFn).map(mappingFn) // assuming global genderMap 
     }, 
     { 
     text: 'OptGroup 2: Age', 
     children: Object.keys(ageMap).filter(filterFn).map(mappingFn) // assuming global ageMap 
     }, 
     { 
     text: 'OptGroup 3: Eye Color', 
     children: Object.keys(eyeMap).filter(filterFn).map(mappingFn) // assuming global eyeMap 
     } 
    ]; 

    // filters 'null' keys 
    function filterFn(key){ 
     return key !== 'null'; 
    } 

    // transforms the array of keys into an array of {options} 
    function mappingFn(key){ 
     var option = {id: counterOption.toString(), text: key}; 
     counterOption++; 
     return option;  
    }  

    // re-initialize select2 with new data 
    $element.select2("destroy"); // destroying may not be necessary 
    $element.select2({ 
     data: data 
    }); 
}