Personalize the look of Select2 Dropdown

Question

In my case, I'm using a select2Combobox as my dropdown menu.

Here, when the Country selection changes, I pass that selected id to the JSON result and get the result, assigned to the province combobox.

When this happens, the dropdown view will change from rounded edges to square .

I want to know how to add the same style to select2 combobox.

This is my 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)
   }
 }

This is the drop-down menu before selecting a country/region

This is the result after selection.

Answer 1

In the success function of the ajax call, try this line after mapping the result:

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

source: jQuery $.addClass()