如何以编程方式将 optgroup 添加到 select2

Question

我正在向预初始化的 select2 对象添加选项值，如下所示：

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 标记内，以帮助用户了解哪个值属于哪个组。

我在 SO 中找到了一些东西，但所有这些答案都依赖于 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
    });
}