Select2下拉框样式统一：切换省份后圆角变直角的解决方法

我在视图中使用Select2作为下拉选择器，切换Country选项时，会将选中的ID传递到JSON接口获取结果，再赋值给Province组合框。但此时Province下拉框的样式会从圆角变为直角，想了解如何为所有Select2组合框添加统一样式。

HTML代码 #

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

样式对比 #

• 切换Country前的下拉框样式：
• 切换Country后的下拉框样式：

解决方案 #

1. 统一初始化所有Select2组件 #

问题根源在于Province下拉框是异步加载数据后才初始化Select2，而Country下拉框可能在页面加载时就已完成初始化，导致两者的样式初始化逻辑不一致。修改代码，页面加载时统一初始化所有带js-dropdown类的下拉框，异步加载后仅更新数据：

$(function () {
  // 页面加载时统一初始化所有Select2下拉框
  $('.js-dropdown').select2({
    width: '100%',
    placeholder: '请选择' // 可根据需求统一设置占位符
  });

  $('.js-Country').change(function () {
    var mapperId = $(this).data('map');
    setDropDownProvinces($(this).val(), mapperId);
  });
});

function setDropDownProvinces(xVal, mapid) {
  try {
    var $provinceSelect = $("#ddlProvId" + mapid);
    $provinceSelect.empty();
    
    $.ajax({
      url: '/Account/FindProvinces',
      type: 'POST',
      dataType: 'json',
      cache: false,
      data: {
        CountryId: xVal
      },
      success: function (data) {
        if (data.Success == true) {
          // 仅更新Select2的数据，不重新初始化组件
          $provinceSelect.select2('data', JSON.parse(data.items));
        }
      }
    });
  } catch (err) {
    console.log(err.message);
  }
}

2. 自定义CSS强制统一样式 #

如果调整初始化逻辑后样式仍不一致，可通过自定义CSS覆盖Select2的默认样式，确保和Bootstrap的form-control样式统一：

/* 统一Select2选择框的圆角、边框 */
.select2-container--default .select2-selection--single {
  border-radius: 4px !important; /* 匹配Bootstrap默认圆角 */
  border-color: #ced4da !important; /* 匹配Bootstrap边框颜色 */
  padding: 0.375rem 0.75rem; /* 匹配form-control内边距 */
  height: auto !important;
}

/* 统一下拉菜单的圆角 */
.select2-dropdown {
  border-radius: 4px !important;
}

/* 统一选中项的文字样式 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
}

3. 检查版本兼容性 #

确保使用的Select2版本与Bootstrap版本兼容，比如Select2 4.x适配Bootstrap 4/5时，可参考官方文档添加适配类，避免样式冲突。

内容的提问来源于stack exchange，提问作者Dev Beginner