替换 select2 选项？答案

【问题标题】：Replacing select2 options?替换 select2 选项？
【发布时间】：2016-02-11 03:15:27
【问题描述】：

全部，

我有两个选择框：

水果选择
水果数量选择

根据 Fruit 中选择的选项会影响 FruitQuantity 的选项。

所以使用 select2，我想通过这样做来替换选择中的所有选项。

var options = [];
            $.each(pageData.products[selectedFruit].quantities, function (key, value) {
                options.push({
                    text: value.quantity,
                    id: value.quantity,

                })
            });
            console.log(options.length);
            $quantitySelect.select2( { data : options });

问题在于 select2 只是将新数据附加到已经存在的数据上。我希望它清除所有选项并添加新选项。

否则我的选择框会填满不正确的选项。

我从这个问题Clear dropdown using jQuery Select2尝试了这个

$quantitySelect.select2('data', null)

虽然这没有任何作用，它不会清除它。

帮助我欧比万，你是我唯一的希望。

【问题讨论】：

你能不能创建小提琴（来自 jsfiddle.net）...这会很有帮助
您使用的是哪个版本的 select2？ 3.5.x 还是 4.0.0？

标签： jquery jquery-select2

【解决方案1】：

假设您使用 select2 4.0.0 和以下类型的 HTML：

<select id="fruits">
    <option value="apple" selected>Apples</option>
    <option value="pear">Pears</option>
</select>
<select id="quantities"></select>

您需要监听"#fruits" 控件上的"change" 事件，并且每次更改时，您都需要使用相关数据重新填充"#quantities" 下拉列表。

如下所示：

var initQuantitiesDropdown = function () {
    var options = [];
    var selectedFruit = $("#fruits").val();
    $.each(pageData.products[selectedFruit].quantities, function (key, value) {
        options.push({
            text: value,
            id: key
        });
    })
    $("#quantities").empty().select2({
        data: options
    });
};

$("#fruits").select2().change(initQuantitiesDropdown);
initQuantitiesDropdown();

您可以在 JSFiddle 中看到这一点

【讨论】：

如果你需要一个占位符，你也需要添加一个空选项，如下$("#quantities").empty().append('<option></option>').select2({ data: options });

【解决方案2】：

先清空列表再重新初始化

$quantitySelect.empty().select2();

https://jsfiddle.net/qum29ken/

【讨论】：

这对select2 4.0.0没有影响

【解决方案3】：

假设你已经初始化了 select2，试试这个$quantitySelect.val(null).trigger("change");。

参考 - https://select2.github.io/examples.html#programmatic

【讨论】：