个性化 Select2 Dropdown 的外观

Question

在我看来，我使用 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)
   }
 }

这是选择国家/地区之前的下拉菜单

这是选择之后的结果。

Answer 1

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

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

来源： jQuery $.addClass()