使用 jquery 用新数据覆盖现有的 select2 多选下拉列表答案

【问题标题】：To override existing select2 multiselect dropdown with new data using jquery使用 jquery 用新数据覆盖现有的 select2 多选下拉列表
【发布时间】：2018-11-11 22:08:54
【问题描述】：

我有两个具有父子关系的 Select2 多选下拉菜单。第一个下拉列表由国家组成，第二个由城市组成。初始加载时的两个下拉菜单均使用 Razor 填充。

<div class="col-md-3">
    <div class="row">
        <div class="col-md-4 right">
            @Html.LabelFor(m => Model.Countries) :
        </div>

        <div class="col-md-8">
            @Html.DropDownList("Countries", Model.CountriesList, new { @class = "form-control", multiple = "multiple" })
         </div>
    </div>
</div>
    <div class="col-md-3">
        <div class="row">
            <div class="col-md-4 right">
                @Html.LabelFor(m => Model.City) :
            </div>

            <div class="col-md-8">
                @Html.ListBox("city", Model.CityList, new { @class = "form-control", multiple = "multiple" })
            </div>
    </div>
</div>


 $('#Countries').select2({
    placeholder: "Select Country..."
 });

 $('#city').select2({
     placeholder: "Select City..."
 });

这部分工作正常。现在在选择下拉国家/地区时，我必须相应地填充城市。由于国家和城市是静态数据，我不想为此使用 AJAX 和不断的服务器调用。

const countrycitylist = {
    "Australia": [
        { id: "syd", text: "Sydney" }, { id: "mlb", text: "Melbourne" }
    ],
    "Cannada": [
        { id: "tor", text: "Toronto" }, { id: "mon", text: "Montreal" }
    ],
    "Newzealand" : [
        { id: "auk", text: "Auckland" }, { id: "wel", text: "Welington" }
    ]
};

$("#Countries").on("change", function () {
    var country = $(this).val(); // Selected values are Australia and Cannada
    var lstCity = [];
    if (country != null || country != undefined) {

        if (country.length > 1) {
            $("#city").select2("destroy");
            for (var key in countrycitylist ) {
                if (country.includes(key)) {
                    lstCity  = lstCity.concat(countrycitylist [key])
                }
            }
            $('#city').select2({
                data: lstCity 
            });
        }

    }
    else {
        return;
    }
});

所以基本上我试图将所有键值对附加到 lstcity 中，并使其成为一个列表来填充下拉列表。

控制台上lstCity的值为

0:{id: "syd", text: "Sydney"}
1:{id: "mlb", text: "Melbourne"}
2:{id: "tor", text: "Toronto"}
3:{id: "mon", text: "Montreal"}
length:4
__proto__:Object

但是 select2 下拉菜单仍然保留初始加载时的初始值，尽管我手动销毁和重建它，但没有任何变化。

【问题讨论】：

标签： javascript jquery razor jquery-select2 dropdown

【解决方案1】：

您必须触发更改才能更改 select2 下拉菜单的值。

你的代码应该是

$('#city').select2({
                       data: lstCity 
                   }).trigger("change");

这将在现有列表的末尾添加 4 项。

如果您的意图是清除列表并仅填充这 4 个，那么您必须在绑定新数据之前清空它

$('#city').empty().trigger("change");
$('#city').select2({
                       data: lstCity 
                   }).trigger("change");

【讨论】：