Select2中optgroup分组下的子选项无法选中如何解决？

我已成功创建带分组的Select2模板，但无法选中分组内的选项，确认下方编写的代码是否存在配置遗漏。 #

• 效果预览：可查看对应演示动图了解故障表现

所用数据格式参考Select2官方数据格式规范

AJAX接口返回结果 #

{
  "status": true,
  "message": null,
  "data": [
    {
      "text": "Bank",
      "children": [
        {
          "id": "002",
          "icon": ".../payment/bri_1.png",
          "text": "BANK BRI"
        },
        {
          "id": "008",
          "icon": ".../payment/mandiri_1.png",
          "text": "BANK MANDIRI"
        },
        {
          "id": "009",
          "icon": ".../payment/bni_1.png",
          "text": "BANK BNI / SYARIAH"
        },
        {
          "id": "014",
          "icon": ".../payment/bca_1.png",
          "text": "BANK BCA"
        },
        {
          "id": "022",
          "icon": ".../payment/1280px-CIMB_Niaga_logo.svg.png",
          "text": "CIMB NIAGA / SYARIAH"
        },
        {
          "id": "016",
          "icon": ".../payment/Maybank-Logo.png",
          "text": "Maybank"
        },
        {
          "id": "013",
          "icon": ".../payment/images.png",
          "text": "PERMATA BANK"
        },
        {
          "id": "213",
          "icon": ".../payment/Jenius-logo.png",
          "text": "Jenius/BTPN"
        },
        {
          "id": "011",
          "icon": ".../payment/kissclipart-danamon-logo-png-clipart-bank-danamon-logo-a9b2b21755c37a3a.png",
          "text": "Danamon"
        },
        {
          "id": "012",
          "icon": ".../payment/images_1.png",
          "text": "Bank Neo Commerce/Bank Yudha Bakti"
        },
        {
          "id": "017",
          "icon": ".../payment/images-removebg-preview.png",
          "text": "Bank Syariah Indonesia"
        }
      ]
    },
    {
      "text": "eMoney",
      "children": [
        {
          "id": "900",
          "icon": ".../payment/ovo.png",
          "text": "OVO"
        },
        {
          "id": "901",
          "icon": ".../payment/gopay.png",
          "text": "GOPAY"
        },
        {
          "id": "903",
          "icon": ".../payment/dana_1.png",
          "text": "DANA"
        },
        {
          "id": "904",
          "icon": ".../payment/linkaja.png",
          "text": "LINK AJA"
        },
        {
          "id": "906",
          "icon": ".../payment/shopeepay-shopee.co.id_ratio-16x9.jpg",
          "text": "SHOPEE PAY"
        }
      ]
    }
  ]
}

实现代码 #

JavaScript 代码 #

$("#payment").select2({
  placeholder: 'Payment',
  width: 'resolve',
  minimumResultsForSearch: Infinity,
  templateResult: function formatState(state) {
    if (!state.id) return state.text;
    var $state = $(
      '<span><img src="' + state.icon + '" style="width:30px;"/> ' + state.text + '</span>'
    );
    return $state;
  },
  ajax: {
    url: base_url + 'user/api/payment',
    dataType: 'json',
    processResults: function(data) {
      return {
        results: $.map(data.data, function(item, key) {
          var children = [];
          for (var k in item.children) {
            var childItem = [];
            childItem.id = item.children[k].id;
            childItem.icon = item.children[k].icon;
            childItem.text = item.children[k].text;
            children.push(childItem);
          }
          return {
            text: item.text,
            children: children,
          }
        })
      };
    },
  }
});

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<div class="form-group">
  <label for="" class="col-sm-2 control-label">Payment</label>
  <div class="col-sm-10">
    <select name="payment" id="payment" class="form-control">
    </select>
  </div>
</div>

故障原因 #

代码存在数据类型使用错误：处理分组下的子选项时，错误将单个子选项声明为数组类型。Select2仅识别对象格式的选项数据，数组上挂载的id、text等属性无法被组件读取，最终渲染出的子选项没有绑定对应数据，点击无法选中。

修复方案 #

将processResults回调内声明子项的代码从数组改为对象即可，修改后的对应代码段如下：

processResults: function(data) {
  return {
    results: $.map(data.data, function(item, key) {
      var children = [];
      for (var k in item.children) {
        // 原错误写法：var childItem = [];
        var childItem = {};
        childItem.id = item.children[k].id;
        childItem.icon = item.children[k].icon;
        childItem.text = item.children[k].text;
        children.push(childItem);
      }
      return {
        text: item.text,
        children: children
      }
    })
  };
}

修改后重新加载组件，分组内选项即可正常选中。 #

内容的提问来源于stack exchange，提问作者A human being