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

Posted 2023-05-07

【中文标题】使用 jquery 用新数据覆盖现有的 select2 多选下拉列表

【英文标题】：To override existing select2 multiselect dropdown with new data using jquery

【发布时间】：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 下拉菜单仍然保留初始加载时的初始值，尽管我手动销毁和重建它，但没有任何变化。

【参考方案1】：

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

你的代码应该是

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

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

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

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