How to add this optgroup json data to Select2?-CodePudding

I want to create a dropdown list using select but with option groups in it. Since Select2 requires JSON format, I use ajax to go to Controller and could successfully return with the JSON object I want. Let's say it looks like this:

Note that the JSON data returned each time are not fixed.

In javascript, I wrote the code which is in the snippet

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>

Can you point out what is wrong and how to make it correct? I have spent several hours trying but still being stuck.

CodePudding user response：

I have found the answer. Since the data returned from ajax is already in the proper format I won't need to map or anything.

Just:

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

CodePudding user response：

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>

this JSON is in the proper format, I have directly passed the option JSON to data, instead of that you can assign it using JSON as below

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

no need any other changes.