重置 select2 上的所有选项并加载另一个数据集

Posted 2023-05-07

【中文标题】重置 select2 上的所有选项并加载另一个数据集

【英文标题】：Reset all options on select2 and load another data set

【发布时间】：2018-10-07 14:01:52

【问题描述】：

我遇到了Jquery Select2 的问题。我想设置一个 select2 选项来更改另一个 select2 选择框。

        var categorySelect = $('#category_select');
        var productSelect = $('#product_select');
        categorySelect.select2();
        productSelect.select2();
        categorySelect.on('change',function () 
            var categoryId = $(this).val();
            var url = "url("/ajax/category/:category/products")";
            url = url.replace(":category",categoryId);
            $.get(url,function (res) 
                var res = [
                    id: 900, text: 'AABB',
                    id: 800, text: 'WWBB',
                ]; // dummy response
                productSelect.select2('data',res);
            )
        )

我在这里关注他们的文档，但不明白为什么再次设置数据没有得到。

【问题讨论】：

也许这会有所帮助：***.com/questions/16480910/…

【参考方案1】：

我以自己的方式解决了这个问题。我正在遍历响应数据数组并为产品选择框创建选项

var categorySelect = $('#category_select');
var productSelect = $('#product_select');
categorySelect.select2();
productSelect.select2();
categorySelect.on('change',function () 
    var categoryId = $(this).val();
    var url = "url("/ajax/category/:category/products")";
    url = url.replace(":category",categoryId);
    $.get(url,function (res) 
        var res = [
            id: 900, text: 'AABB',
            id: 800, text: 'WWBB',
        ];
        if(res.length > 0) 
            productSelect.empty();
            res.forEach(function (prod) 
                var opt = $('<option>', 
                    'value' : prod.id
                ).text(prod.text);
                productSelect.append(opt);
            );
        
    )
);