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");
});
});
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
});
This worked for me!
$("#example").select2().val(null).trigger("change");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With