Bootstrap模态框下拉列表选中值不刷新问题

问题描述：
使用Bootstrap模态框进行数据操作，模态框内包含下拉列表。当下拉列表有A、B、C三个选项时，首次打开模态框显示选中A；若选择B后关闭模态框，再次打开查看其他数据时，下拉列表仍显示选中B，无法刷新对应数据。

模态框代码： #

<div id="detail"> 
  <div class="modal fade" id="detailUnit" role="dialog" aria-labelledby="detailUnitLabel" data-backdrop="static" data-keyboard="false" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
          <h5 class="modal-title" id="detailUnitLabel">Add Unit</h5> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
            <span aria-hidden="true">&times;</span> 
          </button> 
        </div> 
        @using (Html.BeginForm()) { 
        <form id="createPackageForm"> 
          <div class="modal-body"> 
            <div class="row flex-center"> 
              <div class="col-sm-12 col-md-12"> 
                <div class="card"> 
                  <div class="card-body col-md-12"> 
                    <fieldset id="fld"> 
                      @Html.HiddenFor(model => model.Unit.UNIT_PAKE_CODE, new { @id = "hdnPkgView"}) 
                      @Html.HiddenFor(model => model.Unit.UNIT_IP_FLAG, new { @id = "hdnIpFlagVIew" }) 
                      <div class="form row"> 
                        <div class="col-md-8 md-form"> 
                          @Html.DropDownListFor(model => model.Unit.UNIT_PAKE_CODE, new SelectList(ViewBag.PkgSelect, "Value", "Text") , new { @class = " col-md-12 mdb-select colorful-select dropdown-primary", @id = "detailddlPackage"}) 
                          @Html.LabelFor(model => model.Unit.UNIT_PAKE_CODE) 
                          @Html.ValidationMessageFor(model => model.Unit.UNIT_PAKE_CODE, "", new { @class = "text-danger" }) 
                        </div> 
                      </div> 
                      <div class="form row"> 
                        <div class="col-md-8 md-form"> 
                          @Html.LabelFor(model => model.Unit.UNIT_CODE) 
                          @Html.TextBoxFor(model => model.Unit.UNIT_CODE, new { @readonly = true, @class = "form-control col-md-12", @MaxLength = 2, @id = "detailtxtAddUnitCode", @placeholder = "Unit Code", @onkeypress = "return IsNumeric(event)" }) 
                          @Html.ValidationMessageFor(model => model.Unit.UNIT_CODE, "", new { @class = "text-danger" }) 
                        </div> 
                      </div> 
                      <div class="form row"> 
                        <div class="col-md-8 md-form"> 
                          @Html.LabelFor(model => model.Unit.UNIT_NAME) 
                          @Html.TextBoxFor(model => model.Unit.UNIT_NAME, new { @readonly = true, @class = "form-control col-md-12", @MaxLength = 50, @id = "detailtxtAddUnitName", @placeholder = "Unit Name", @type = "text" }) 
                          @Html.ValidationMessageFor(model => model.Unit.UNIT_NAME, "", new { @class = "text-danger" }) 
                        </div> 
                      </div> 
                      <div class="form row"> 
                        <div class="col-md-8 md-form"> 
                          @Html.DropDownListFor(model => model.Unit.UNIT_IP_FLAG, Model.Unit.StatusList, new { @class = "col-md-12 mdb-select colorful-select dropdown-primary", @searchable = "Search here...", @id = "detailddlStatus", @disabled = "disabled" }) 
                          @Html.LabelFor(model => model.Unit.UNIT_IP_FLAG) 
                          @Html.ValidationMessageFor(model => model.Unit.UNIT_IP_FLAG, "", new { @class = "text-danger" }) 
                        </div> 
                      </div> 
                      <div class="form row"> 
                        <div class="col-md-6 md-form"> 
                          @Html.LabelFor(model => model.Unit.UNIT_IP_FROM) 
                          @Html.TextBoxFor(model => model.Unit.UNIT_IP_FROM, new { @readonly = true, @class = "form-control", @MaxLength = 15, @id = "detailtxtAddUnitIPFrom", @placeholder = "IP Address", @type = "text" }) 
                          @Html.ValidationMessageFor(model => model.Unit.UNIT_IP_FROM, "", new { @class = "text-danger" }) 
                        </div> 
                        <div class="col-md-6 md-form"> 
                          @Html.LabelFor(model => model.Unit.UNIT_IP_TO) 
                          @Html.TextBoxFor(model => model.Unit.UNIT_IP_TO, new { @readonly = true, @class = "form-control ", @MaxLength = 15, @id = "detailtxtAddUnitIPTo", @placeholder = "IP Address", @type = "text" }) 
                          @Html.ValidationMessageFor(model => model.Unit.UNIT_IP_TO, "", new { @class = "text-danger" }) 
                        </div> 
                      </div> 
                    </fieldset> 
                  </div> 
                </div> 
              </div> 
            </div> 
          </div> 
          <div class="form-group modal-footer"> 
            <button type="submit" id="btnView" class="btn btn-primary"data-dismiss="modal"> Ok</button> 
          </div> 
        </form> 
        } 
      </div> 
    </div> 
  </div> 
</div>

原脚本代码（补全后）： #

<script type="text/javascript"> 
$("body").on("click", ".detail", function () { 
    var row = $(this).closest("tr"); 
    var pkg = row.find("td").eq(1).html(); 
    var unit = row.find("td").eq(2).html(); 
    $('#detailUnit').removeData(); 
    $('#detailUnit').modal('toggle'); 
    getUnitDetail(pkg, unit); 
    return false; 
}); 

$.ajaxSetup({ cache:false }) 

function ValidateIPaddress(ipaddress) { 
    if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress)) { 
        return (true) 
    } 
    swal('Oops...', 'You have entered an invalid IP address!', 'error'); 
    return (false); // 补全原代码缺失的部分
}
</script>

问题根源 #

Bootstrap模态框默认是隐藏/显示的切换逻辑，不会销毁DOM元素，所以下拉列表（尤其是你用的MDB自定义select组件）会保留上一次的选中状态。另外，MDB的select是基于原生select封装的，直接修改原生select的value不会自动同步到UI，需要手动触发组件初始化。

修复方案 #

1. 模态框关闭时重置表单状态 #

给模态框绑定hidden.bs.modal事件，在关闭时重置所有表单控件，并重新初始化MDB select组件：

// 监听模态框关闭事件，重置表单状态
$('#detailUnit').on('hidden.bs.modal', function () {
    // 重置表单所有控件到初始状态
    $('#createPackageForm')[0].reset();
    
    // 销毁并重新初始化MDB select，确保样式和状态同步
    $('.mdb-select').materialSelect('destroy');
    $('.mdb-select').materialSelect();
});

2. 获取数据后强制设置下拉列表选中值 #

在getUnitDetail函数中，获取到当前数据后，主动设置下拉列表的选中值，并重新初始化MDB select：

function getUnitDetail(pkg, unit) {
    $.ajax({
        url: '/YourController/GetUnitDetail', // 替换为你的实际接口地址
        type: 'GET',
        data: { pkg: pkg, unit: unit },
        success: function (data) {
            // 设置隐藏域和输入框的值
            $('#hdnPkgView').val(data.Unit.UNIT_PAKE_CODE);
            $('#detailtxtAddUnitCode').val(data.Unit.UNIT_CODE);
            $('#detailtxtAddUnitName').val(data.Unit.UNIT_NAME);
            $('#detailtxtAddUnitIPFrom').val(data.Unit.UNIT_IP_FROM);
            $('#detailtxtAddUnitIPTo').val(data.Unit.UNIT_IP_TO);
            $('#hdnIpFlagVIew').val(data.Unit.UNIT_IP_FLAG);

            // 设置下拉列表选中值并重新初始化
            $('#detailddlPackage').val(data.Unit.UNIT_PAKE_CODE);
            $('#detailddlPackage').materialSelect();

            // 处理禁用的状态下拉框
            $('#detailddlStatus').val(data.Unit.UNIT_IP_FLAG);
            $('#detailddlStatus').materialSelect();
        },
        error: function () {
            swal('Error', 'Failed to load unit details', 'error');
        }
    });
}

3. 优化打开模态框的逻辑 #

去掉无用的removeData()，确保模态框打开前先清空状态：

$("body").on("click", ".detail", function () {
    var row = $(this).closest("tr");
    var pkg = row.find("td").eq(1).html();
    var unit = row.find("td").eq(2).html();
    
    // 先重置表单状态再打开模态框
    $('#createPackageForm')[0].reset();
    $('.mdb-select').materialSelect('destroy');
    $('.mdb-select').materialSelect();
    
    $('#detailUnit').modal('toggle');
    getUnitDetail(pkg, unit);
    return false;
});

内容的提问来源于stack exchange，提问作者vikas mishra