Personnalisez l'apparence de Select2 Dropdown

Question

Dans mon cas, j'utilise select2Combobox pour mon menu déroulant.

Ici, lorsque Country la sélection change, je transmets cet identifiant sélectionné au résultat JSON et j'obtiens le résultat, attribué à la liste déroulante de la province.

Lorsque cela se produit, la vue déroulante passera des bords arrondis à square .

Je veux savoir comment ajouter le même style à la liste déroulante select2.

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

Voici le menu déroulant avant de sélectionner un pays

Voici le résultat après sélection.

Answer 1

Dans la fonction success de l'appel ajax, essayez cette ligne après avoir cartographié le résultat :

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

Source : jQuery $.addClass()