如何将此optgroup json数据添加到Select2?

Question

我想创建一个下拉列表使用选择，但在它的选项组。由于Select2需要JSON格式，所以我使用ajax转到Controller，并可以成功返回我想要的JSON对象。假设它看起来像这样:

请注意，每次返回的JSON数据都不是固定的。

在javascript中，我编写了代码片段

var option = [{
"text": "Group A",
"children": [{
"id": "0",
"text": "B00000001"
},
{
"id": "1",
"text": "B00000007"
},
{
"id": "2",
"text": "B00000008"
}
]
},
{
"text": "Group B",
"children": [{
"id": "0",
"text": "B00000002"
},
{
"id": "1",
"text": "B00000004"
},
{
"id": "2",
"text": "B00000005"
},
{
"id": "3",
"text": "B00000006"
}
]
}
];
$("#selectForm").select2({
width: '30%',
allowClear: true,
placeholder: "Select Form",
ajax: {
url: '@Url.Action("GetOptionList")',
delay: 250,
dataType: "json",
type: "POST",
data: function (term) {
return {
term: term
};
},
processResults: function (data) {
return {
results: $.map(data, function (item, key) {
var children = [];
for (var k in item) {
var childItem = item[k];
childItem.text = item[k].text;
children.push(childItem);
}
return {
text: key,
children: children,
}
})
};
}   
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<select id="selectForm"></select>

你能指出错误的地方并如何改正吗?我已经试了好几个小时了，但还是卡住了。

Answer 1

var option = [{
"text": "Group A",
"children": [{
"id": "0",
"text": "B00000001"
},
{
"id": "1",
"text": "B00000007"
},
{
"id": "2",
"text": "B00000008"
}
]
},
{
"text": "Group B",
"children": [{
"id": "0",
"text": "B00000002"
},
{
"id": "1",
"text": "B00000004"
},
{
"id": "2",
"text": "B00000005"
},
{
"id": "3",
"text": "B00000006"
}
]
}
];
$("#selectForm").select2({
width: '30%',
allowClear: true,
placeholder: "Select Form",
data: option,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<select id="selectForm"></select>

这个JSON在适当的格式,我直接通过选择JSON数据,相反的,你可以把它使用JSON作为低于

processResults: function (data) {
return {
results: data
}
}

不需要任何其他更改。

Answer 2

我找到了答案。因为从ajax返回的数据已经是正确的格式，所以我不需要映射或任何东西。

:

processResults: function (data) {
return{
results: data
}
}