替换 select2 选项？

Question

全部，

我有两个 select 盒子 :

水果select
水果数量select

根据 selectFruit 中的选项会影响 FruitQuantity 的选项。

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

否则我的 select 框填满了不正确的选项。

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

$quantitySelect.select2('data', null)

虽然这没有任何作用，但它并没有清除它。

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

Answer 1

先清空列表再重新初始化

$quantitySelect.empty().select2();

https://jsfiddle.net/qum29ken/

Answer 2

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

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

Answer 3

假设您使用 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

中看到实际效果

替换 select2 选项？

Replacing select2 options?

jquery

jquery-select2