如何将此 optgroup json 数据添加到 Select2？答案

【问题标题】：How to add this optgroup json data to Select2?如何将此 optgroup json 数据添加到 Select2？
【发布时间】：2022-07-07 16:55:18
【问题描述】：

我想使用 select 创建一个下拉列表，但其中包含选项组。由于 Select2 需要 JSON 格式，所以我使用 ajax 去 Controller 并且可以成功返回我想要的 JSON 对象。假设它看起来像这样：

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

在javascript中，我编写了sn-p中的代码

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>

你能指出什么是错的以及如何改正吗？我已经尝试了几个小时，但仍然卡住了。

【问题讨论】：

标签： json ajax asp.net-mvc jquery-select2 optgroup

【解决方案1】：

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

只是：

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

【讨论】：

【解决方案2】：

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
    }
}

不需要任何其他更改。

【讨论】：