如何在Modal中添加正常显示的多选下拉复选框？

我在Bootstrap模态框中使用jQuery Multiselect多选下拉组件时，出现了显示变形的问题，但该组件在普通页面中能正常展示。尝试了多种方法仍未解决，相关信息如下：

• 【变形效果】：组件布局错乱，下拉选项或按钮样式异常
• 【正常效果】：组件样式正常，下拉列表展示规整

JS代码 #

$(function() {
  $('#managedBY').multiselect({
    nonSelectedText: 'Select Your Manager(s)',
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    buttonWidth: '430px'
  });
  $('#prim_skills_form').on('submit', function(event) {
    event.preventDefault();
    var form_data = $(this).serialize();
    $.ajax({
      method: "POST",
      data: form_data,
      success: function(data) {
        $('#managedBY option:selected').each(function() {
          $(this).prop('selected', false);
        });
        $('#managedBY').multiselect('refresh');
        alert(data);
      }
    });
  });
});

HTML代码 #

<div id="modaledit{{row.userid}}" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Please Update User</h4>
      </div>
      <div class="modal-body">
        <form action="{{url_for('Admin.update')}}" method="POST" id="prim_skills_form">
          <div class="form-group">
            <label>Select your Manager(s)</label>
            <select class="form-control" id="managedBY" name="managedBY" multiple>
              {% for row in users %} {% if row.role == 'admin' %}
              <option value="{{row.managerid}}">{{row.managerid}} - {{row.name}}</option>
              {%endif%} {% endfor %}
            </select>
          </div>

解决方案 #

1. 延迟初始化组件 #

模态框属于动态渲染元素，页面加载时直接初始化会因DOM未完全渲染导致样式计算错误，改为在模态框完全显示后初始化：

// 移除原页面加载时的初始化代码，改用模态框显示事件触发
$('#modaledit{{row.userid}}').on('shown.bs.modal', function() {
  $('#managedBY').multiselect({
    nonSelectedText: 'Select Your Manager(s)',
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    buttonWidth: '100%' // 用百分比适配模态框宽度，避免固定宽度溢出
  });
});

2. 调整组件层级避免遮挡 #

模态框默认z-index较高，可能导致Multiselect下拉列表被遮挡或布局异常，添加自定义CSS：

.multiselect-container {
  z-index: 9999 !important;
}

3. 适配模态框内的样式冲突 #

模态框的modal-body有默认padding，固定宽度按钮容易溢出，添加样式让组件自适应：

#managedBY+.btn-group {
  width: 100%;
}
#managedBY+.btn-group .multiselect {
  width: 100%;
}

4. 处理动态模态框的重复初始化问题 #

如果是循环生成多个模态框，要避免重复初始化或内存泄漏，在模态框隐藏时销毁组件：

$('#modaledit{{row.userid}}').on('hidden.bs.modal', function() {
  $('#managedBY').multiselect('destroy');
});

内容的提问来源于stack exchange，提问作者Bilge Kaan Özkan