[英]To override existing select2 multiselect dropdown with new data using jquery
I have two Select2 multiselect dropdown which has a parent child relationship. 我有两个具有父子关系的Select2 multiselect下拉列表。 The first dropdown consists of countries and the second consists of cities.
第一个下拉列表包含国家/地区,第二个下拉列表包含城市。 Both drop downs on initial load are populated using Razor.
使用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.
由于国家和城市是静态数据,因此我不想使用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;
}
});
So basically I am trying to append into lstcity all the key value pair and make it one single list to populate the dropdown. 因此,基本上,我试图将所有键值对附加到lstcity中,并使其成为一个列表以填充下拉列表。
The value of lstCity on the console is 控制台上的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
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. 但是select2下拉列表仍然保留了初始加载时的初始值,尽管我手动销毁和重建了它,但是它没有任何变化。
You will have to trigger change to change the values of the select2 dropdown. 您将必须触发更改才能更改select2下拉列表的值。
Your code should be 您的代码应为
$('#city').select2({
data: lstCity
}).trigger("change");
This will add the 4 items at the end of the existing list. 这会将4个项目添加到现有列表的末尾。
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 如果您打算擦除列表并仅填充这4个列表,则在绑定新数据之前必须将其清空
$('#city').empty().trigger("change");
$('#city').select2({
data: lstCity
}).trigger("change");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.