Peribadikan rupa Select2 Dropdown

Question

Dalam kes saya, saya menggunakan select2Kombobox untuk menu lungsur saya.

Di sini, apabila Country pemilihan berubah, saya menghantar id yang dipilih itu kepada hasil JSON dan mendapatkan hasilnya, diperuntukkan kepada kotak kombo wilayah.

Apabila ini berlaku, paparan lungsur turun akan berubah daripada tepi bulat kepada square .

Nak tahu macam mana nak tambah gaya yang sama untuk pilih2 combobox.

Ini kod saya.

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

Ini ialah menu lungsur sebelum memilih negara

Ini adalah hasil selepas pemilihan.

Answer 1

Dalam fungsi kejayaan panggilan ajax, cuba baris ini selepas memetakan hasilnya:

$("#ddlProvId" + mapid).addClass('form-control js-dropdown js-Province');

Sumber: jQuery $.addClass()