如何在每个新请求中使用 Ajax 数据源制作 select2 下拉列表？

Question

我在 select 框内使用 select2 js 用于多个 optgroup.. 我正在从 AJAX 成功调用格式化 JSON，下面是我的代码。它附加到 select 框，但它与现有数据合并。我只想在 select 框中显示 Return Ajax 数据。我尝试使用 select 销毁并重新初始化，但它不起作用。请帮助我如何使新数据仅填充 select2.

$.post('/get_ajax_data/',{custom_param:1}, function(data){ 
        var result = data.result; 
        $("#client1_select").select2({ data:result }); 
        $('#client1_select').trigger("change"); 
    });

Answer 1

issue is an existing select box is not replacing with new data but it's just appending with old data..

添加新项目前需要empty select（我用按钮模拟ajax调用）：

var result = [{
    "text": "ClientName + Version data is AJAX",
    "children": [{"id": "test1", "text": "test1", "disabled": true}, {
        "id": "test2",
        "text": "test2",
        "selected": "true",
        "disabled": false
    }, {"id": "test3", "text": "test3", "disabled": true}]
}, {
    "text": "Variant",
    "children": [{"id": "1_variant", "text": "single"}, {"id": "2_variant", "text": "dual"}]
}];


$('#client1_select').select2({data: result});
$('#btn').on('click', function (e) {
    $("#client1_select").empty().select2({data: result});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>


<button id="btn">Click me</button>
<select id="client1_select" name="states[]" multiple="multiple">
</select>

如何在每个新请求中使用 Ajax 数据源制作 select2 下拉列表？

How to make select2 dropdown using Ajax Data Source with each new request?

jquery

jquery-select2