jquery select2 refresh data

Question

I using select2 to select and ajax to load data, how can I replace old data when the state is changed after initial selection.

My loading code:

$('.datetimepicker').on("changeDate", function() {  
        //refresh selectbox ??
        doctor_id = $(".select2-doctors").val();
        clinic_id = $(".select2-clinics").val();
        date = $('.datetimepicker').datepicker('getFormattedDate');
        $.ajax({
            url: '/admin/appointments/time_slots',
            type: 'GET',
            dataType: 'json',
            data: {doctor_id: doctor_id, clinic_id: clinic_id, date: date}
        })
        .done(function(data) {
            console.log("success");
            console.log(data);
            $('.select2-slot').select2({
                data: data.slots
            });
        })
        .always(function() {
            console.log("complete");
        });
    });

Subsequent

Hi, can you provide more info? which of the three select2 do you want to update? when and what to load? – Hardnosed

Thang Le Sy is it working for datepicker change? I believe you need to add change event for select2-clinics and select2-doctors and include same ajax call to update select2-slot if its working for datepicker change as expected. – Himyaritic

@FedericoBaron when I change date, I want to change slot us ajax loading, the first time datetimepicker default is today and I recived data but the second time selectbox can't replace old data althought ajax loading it's work. (my english is not well :)) ) – Subsequent

@pratikwebdev yes, datetimepicker work, and I recived data from ajax but i can't replace my old data – Subsequent

Thang Le Sy Which select2 element you wish to refresh? What version of select2 are you using? Could you share JSON structure/template for data.slots? – Himyaritic

Answer 1

Try emptying the select2 options before to update data, this because by default it appends data to existing options.

$('.select2-slot').empty();
$('.select2-slot').select2({
    data: data.slots
});

Hardnosed

What if I need to refresh only 1 option? One of the properties for the option has been changed / renamed and I need to reflect this change ideally without rebuilding or triggering all the events associated with a change? – Crippen

Answer 2

This worked for me!

$("#example").select2().val(null).trigger("change");

Ticktack

Answer 3

instance && $('.select2').empty();
var instance = $('.select2').select2({
    data: data
});

Alben

Answer 4

Just call this fun() function. And it will clear everything inside. Everything is documented here. A working jsfiddle here

<button onclick="fun()">
  Click
</button>

<script>
// create select2 option
$("#example").select2();

// the clearing function
function fun() {
    $("#example").select2().val(null).trigger("change");
}
</script>

Tannatannage