jquery select2 刷新数据答案

【问题标题】：jquery select2 refresh datajquery select2 刷新数据
【发布时间】：2016-01-23 10:23:19
【问题描述】：

我使用select2选择和ajax加载数据，如何在初始选择后状态改变时替换旧数据。

我的加载代码：

$('.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");
        });
    });

【问题讨论】：

您好，您能提供更多信息吗？您要更新三个 select2 中的哪一个？什么时候加载什么？
Thang Le Sy 是否适用于 datepicker 更改？我相信您需要为 select2-clinics 和 select2-doctors 添加更改事件，并包含相同的 ajax 调用以更新 select2-slot 如果它按预期工作于 datepicker 更改。
@FedericoBaron 当我更改日期时，我想更改插槽我们 ajax 加载，第一次 datetimepicker 默认是今天，我收到了数据，但第二次选择框无法替换旧数据，尽管 ajax 加载它工作。（我的英语不好:)））
@pratikwebdev 是的，datetimepicker 工作，我从 ajax 接收数据，但我无法替换我的旧数据
Thang Le Sy 您希望刷新哪个 select2 元素？您使用的是哪个版本的 select2？你能分享data.slots的JSON结构/模板吗？

标签： jquery jquery-select2

【解决方案1】：

在更新数据之前尝试清空 select2 选项，这是因为默认情况下它会将数据附加到现有选项。

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

【讨论】：

如果我只需要刷新 1 个选项怎么办？该选项的属性之一已更改/重命名，我需要在不重建或触发与更改相关的所有事件的情况下理想地反映此更改？

【解决方案2】：

这对我有用！

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

只需调用这个 fun() 函数。它会清除里面的一切。一切都记录在案here。一个工作的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>

【讨论】：