在使用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>