如何以编程方式添加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 
    }); 
}