Question

所有

我有两个选择框：

水果选择
FruitQuantity选择

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

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

我从这个问题https://github.com/sling-git/org.apache.sling.scripting.groovy

尝试了这个

$quantitySelect.select2('data', null)

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

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

Answer 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>

您需要收听"change"控件上的"#fruits"事件，并且每次更改时，您都需要重新填充{{1}下拉相关数据。

以下是它的样子：

"#quantities"

您可以在此JSFiddle

中查看此操作

Answer 2

首先清空列表然后重新初始化

$quantitySelect.empty().select2();

https://jsfiddle.net/qum29ken/

Answer 3

尝试此$quantitySelect.val(null).trigger("change");，假设您已初始化select2。

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

替换select2选项？

3 个答案: