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

Question

I am using select2 js for multiple optgroup inside select Box.. I am getting formatted JSON from AJAX Success Call, below is my code. It's appending to select box but its merging with existing data. I want to show only Return Ajax Data in the select box.. I have tried with select destroy and reinialize but it's not working. Please help me on how to make new data only populate in select2.

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

@gaetanoM data:result is not having any duplicate.. its fresh data only.. but its appending to existing select box values thats the problem. — Vijaysinh Parmar
There is no duplicates I am sure.. this is result data {"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"}]}]} — Vijaysinh Parmar
@gaetanoM issue is an existing select box is not replacing with new data but it's just appending with old data.. — Vijaysinh Parmar

gaetanoM gaetanoM · Accepted Answer · 2019-07-31T18:55:19

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

You need to empty the select before adding new items (I used a button to simulate ajax call):

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>

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

1 Answers