Bootstrap模态框中Select2单选与多选组件表现不一致问题咨询

嘿，这个问题我碰到过好几次了，单选和多选Select2在Bootstrap模态框里表现不一致，大概率是这几个细节在搞鬼：

1. 初始化时机与DOM状态的差异 #

单选Select2很可能在模态框处于隐藏状态时就完成了初始化——毕竟模态框默认是display: none的，这会导致单选组件的DOM尺寸计算异常。后来你为了修复下拉框位置（比如加了dropdownParent配置）重新初始化时，没同步把原有选项数据重新绑定回去，直接就清空了。而多选组件的初始化逻辑对隐藏DOM的兼容性更好，或者你刚好在模态框显示后才初始化它，自然没这个问题。

2. 配置项的细微区别 #

你可以对比下单选和多选的Select2配置：

• 单选可能没设置data属性，也没保留从DOM读取<option>的逻辑，重新初始化时就没了数据源；而多选默认会自动读取DOM里的<option>，哪怕重新初始化也不会丢数据。
• 比如单选如果用了AJAX加载数据，修复位置时没把ajax配置里的缓存/重新请求逻辑加上，导致重新初始化后没触发数据加载；多选的AJAX配置可能本来就有cache: true或者保留了上次的请求结果。

3. 重复初始化的冲突 #

很多人修复模态框里Select2位置的方法是在shown.bs.modal事件里重新初始化，但如果单选组件没先销毁旧实例就直接重新初始化，就会触发Select2的内部重置逻辑，把选项清空。而多选可能你做了判断（比如检查是否已经有select2-hidden-accessible类），只初始化一次，所以没出现这个问题。举个反例：

$('#modal').on('shown.bs.modal', function() {
  // 单选没销毁就重新初始化，直接清空数据
  $('#single-select').select2({ dropdownParent: $(this) });
  // 多选有判断，只初始化一次
  if (!$('#multi-select').hasClass('select2-hidden-accessible')) {
    $('#multi-select').select2({ dropdownParent: $(this) });
  }
});

4. 表单相关的隐性干扰 #

检查下单选的<select>标签有没有被其他代码（比如表单重置插件、验证工具）意外修改：

• 有些表单验证逻辑会在模态框显示时重置表单，单选刚好被重置为空；而多选因为是多选类型，重置逻辑不会清空已选值。
• 另外，单选的<option>如果是动态生成的，你修复位置后有没有重新渲染这些选项？多选的<option>可能是静态写死的，自然不受影响。

试试在模态框显示时，先销毁单选的旧Select2实例再重新初始化，同时确保数据源存在：

$('#your-modal').on('shown.bs.modal', function() {
  const $singleSelect = $('#single-select-id');
  // 先销毁已有实例
  if ($singleSelect.data('select2')) {
    $singleSelect.select2('destroy');
  }
  // 重新初始化，保留DOM里的<option>数据
  $singleSelect.select2({
    dropdownParent: $(this),
    placeholder: '请选择',
    // 其他配置，比如AJAX请求逻辑
  });
});

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