個性化 Select2 Dropdown 的外觀
在我看來，我使用 select2Combobox 作為我的下拉式選單。
在這裡，當 Country 選擇變更時，我將該選定的 id 傳遞給 JSON 結果並取得結果，指派給省份組合方塊。
發生這種情況時，下拉視圖將從圓邊變更為 square 。
我想知道如何在 select2 組合框中新增相同的樣式。
這是我的程式碼。
<div class="col-md-6 col-sm-6">
<div class="form-group row"> @Html.LabelFor(model => model.Country_Id, htmlAttributes: new { @class = "control-label col-md-3 required" }) <div class="col-sm-8">
<span class="asterisk_input"></span> @Html.DropDownList("Country_Id", null, "Select Country", new { @class = "form-control js-dropdown js-Country", @Id = "Country", @data_map = Model.TempId, @required = true }) @Html.ValidationMessageFor(model => model.Country_Id, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group row"> @Html.LabelFor(model => model.Province_Id, htmlAttributes: new { @class = "control-label col-md-3 required" }) <div class="col-sm-8">
<span class="asterisk_input"></span> @Html.DropDownListFor(model => model.Province_Id, new List <SelectListItem>(), new { @class = "form-control js-dropdown js-Province", @id = "ddlProvId" + Model.TempId, @data_map = Model.TempId, @required = true }) @Html.ValidationMessageFor(model => model.Province_Id, "", new { @class = "text-danger" })
</div>
</div>
</div>
Javascript
$(function () {
$('.js-Country').change(function () {
var mapperId = $(this).data('map');
setDropDownProvinces($(this).val(), mapperId)
});
});
function setDropDownProvinces(xVal, mapid) {
try {
$("#ddlProvId" + mapid).empty().trigger("changed");
$.ajax({
url: '/Account/FindProvinces',
type: 'POST',
dataType: 'json',
cache: false,
async: false,
data: {
CountryId: xVal
},
success: function (data) {
if (data.Success == true) {
$("#ddlProvId" + mapid).select2({
width: '100%',
data: JSON.parse(data.items)
});
}
}
});
} catch (err) {
console.log(err.message)
}
}
這是選擇國家之前的下拉式選單
這是選擇之後的結果。
