Чтобы переопределить существующий выпадающий список select2 multiselect новыми данными, используя jquery - PullRequest
Новая
       21

Чтобы переопределить существующий выпадающий список select2 multiselect новыми данными, используя jquery

0 голосов
/ 01 июня 2018

У меня есть два выпадающих списка выбора 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 Ответ

0 голосов
/ 01 июня 2018

Вам нужно будет вызвать изменение, чтобы изменить значения выпадающего списка select2.

Ваш код должен быть 

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

Это добавит 4 элемента в конец существующего списка..

Если вы намереваетесь стереть список и заполнить только эти 4, вам придется очистить его перед привязкой новых данных 

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