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

官方文档向您展示了如何使用插件<optgroup>选项添加<option>和data标记。 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
    });
}

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

1 个答案: