使用jQuery用新數據覆蓋現有的select2多選下拉列表

Question

我有兩個具有父子關系的Select2 multiselect下拉列表。 第一個下拉列表包含國家/地區，第二個下拉列表包含城市。 使用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下拉列表仍然保留了初始加載時的初始值，盡管我手動銷毀和重建了它，但是它沒有任何變化。

Answer 1

您將必須觸發更改才能更改select2下拉列表的值。

您的代碼應為

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

這會將4個項目添加到現有列表的末尾。

如果您打算擦除列表並僅填充這4個列表，則在綁定新數據之前必須將其清空

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