Personalisieren Sie das Aussehen von Select2 Dropdown

Question

In meinem Fall verwende ich select2Combobox für mein Dropdown-Menü.

Wenn Country sich hier die Auswahl ändert, übergebe ich die ausgewählte ID an das JSON-Ergebnis und erhalte das Ergebnis, das der Provinz-Kombinationsbox zugewiesen ist.

In diesem Fall ändert sich die Dropdown-Ansicht von abgerundeten Kanten zu square .

Ich möchte wissen, wie man den gleichen Stil zur Combobox „select2“ hinzufügt.

Das ist mein Code.

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

Dies ist das Dropdown-Menü vor der Auswahl eines Landes

Dies ist das Ergebnis nach der Auswahl.

Answer 1

在 ajax 调用的成功函数中，在映射结果后尝试此行：

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

来源： jQuery $.addClass()