替换select2选项？

tomaytotomato

所有，

我有两个选择框：

水果选择
水果数量选择

根据“水果”中选择的选项，将影响“水果数量”的选项。

因此，使用select2时，我想通过执行此操作来替换select中的所有选项。

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只是将新数据附加到已经存在的数据上。我希望它清除所有选项并添加新选项。

否则，我的选择框将填满错误的选项。

我从这个问题尝试使用jQuery Select2清除下拉列表

$quantitySelect.select2('data', null)

尽管这没有做任何事情，但并不清楚。

帮我Obi Wan，你是我唯一的希望。

德萨里尔

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

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

您需要监听控件"change"上的事件"#fruits"，并且每次更改时，您都需要"#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中看到此操作

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。