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>