select2 分組后的選項無法被選中

在使用select2組件的過程中發現分組下的選項無法選中，與分組在同一級的選項可以被選中！

1、所用select2版本select2-4.0.32

2、HTML代碼：

<input id="type" name="type" class="form-control select2 required" style="width:200px; height: 25px"/>

3、js代碼

//綁定字典內容到指定的Select控件
function BindSelect2(eleName, url) {
    //綁定Ajax的內容
    $.getJSON(url, function (data) {
        $('#' + eleName).select2({
            data: data.rows,
            placeholder: '請選擇',
            allowClear: true,
            templateResult: function (item) {
                return item.text;
            },
            formatResult: function (item) {
                return item.text;
            },
        })
    });
}

 

4、Ajax返回的數據

[
    {
        "id": "T01",
        "text": "辦公類",
        "element": "HTMLOptionElement"
    },
    {
        "id": "T02",
        "text": "設備類",
        "element": "HTMLOptionElement"
    },
    {
        "id": "T03",
        "text": "項目類",
        "element": "HTMLOptGroupElement",
        "children": [
            {
                "id": "T0301",
                "text": "機加工",
                "element": "HTMLOptionElement"
            },
            {
                "id": "T0302",
                "text": "維修改造",
                "element": "HTMLOptionElement"
            }
        ]
    }
]

 其中辦公類和設備類可以被選擇，項目類下的機加工和維修改造無法被選擇。

5、解決方法：把html標簽由input換成select即可

<select id="type" name="type" class="form-control select2 required" style="width:200px; height: 25px"></select>