javascript - 如何使用ajax更新select2下拉列表中的数据

Question

我有一个位置的select2下拉列表。select2数据在页面加载时初始化。我想使用ajax定期更新数据。但是当我更新select2的数据时，select2下拉列表变为只读

    jQuery("#e10_2").select2({
        allowClear: true,
        minimumInputLength: 1,
        data:{ results: locationls, text: function(item) { return item.text; }},
        formatSelection: format,
        formatResult: format
    }); 

Answer 1

我真的不明白你的问题，并认为它需要一些澄清 - 但据我所知（我遇到了这个问题并在谷歌搜索时发现了你的问题......）

当我第一次加载页面时，我运行以下 JavaScript，以便我所有的下拉选择框都设置样式并使用 select2：

$('select').select2();

但正如您的标题所述，我下面的代码通过将下拉列表更新为一组新数据来工作 - 我的/store/ajax_get_zones函数在其中返回选项的 HTML：

$(function() {
    $('#country').on('change', function() {
        $.post("/store/ajax_get_zones", {
            country_id: $('#country').val()
        }, function(e) {
            if (e)
                $("#state").html(e).select2();
        })
    });
});

您所要做的就是.select2()在更新数据后调用该元素。

屏幕截图

从默认的美国开始：

然后，当您更改国家/地区时，状态下拉列表也会更改（ajax 更新了原始选择的内部 HTML，同时仍以 select2 为主题