To override existing select2 multiselect dropdown with new data using jquery

Question

I have two Select2 multiselect dropdown which has a parent child relationship. The first dropdown consists of countries and the second consists of cities. Both drop downs on initial load are populated using 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..."
 }); 

This portion works fine. Now on selection of the dropdown countries, I have to populate the cities accordingly. Since the countries and cities are static data I do not want to use AJAX and constant server calls for this.

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;
    }
});

So basically I am trying to append into lstcity all the key value pair and make it one single list to populate the dropdown.

The value of lstCity on the console is

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

But the select2 dropdown still retains it's initial value from the initial load and there is no change in spite of me manually destroying and rebuilding it.

Answer 1

You will have to trigger change to change the values of the select2 dropdown.

Your code should be

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

This will add the 4 items at the end of the existing list.

If your intention is to wipe the list off and populate only those 4 then you will have to empty it before binding the new data

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