Select2+Bootstrap Modal异常求助：自动选选项/下拉框错位

• Bootstrap版本：5.1.3
• Select2版本：4.1.0
• 问题现象：Bootstrap模态框内的Select2控件出现两种异常：1. 打开时自动选中选项；2. 下拉选项框错位显示在其他选择控件下方。该问题在iOS（Mac）设备上频繁触发，Windows环境下操作最后两个选择控件时也会出现。
• 已尝试方案：调整CSS/z-index、重写Bootstrap模态框的enforceFocus方法（$.fn.modal.Constructor.prototype.enforceFocus = function() {};），但未解决问题。

1. 延迟Select2初始化到模态框完全显示后 #

模态框未完全渲染完成就初始化Select2，会导致下拉框的位置计算错误。将初始化逻辑绑定到模态框的shown.bs.modal事件，确保DOM已完全加载：

// 模态框显示完成后初始化Select2
$('#dataModal').on('shown.bs.modal', function () {
  $('.select2', this).select2({
    dropdownParent: $(this),
    width: '100%'
  });
});

// 模态框隐藏时销毁Select2，避免重复初始化引发的冲突
$('#dataModal').on('hidden.bs.modal', function () {
  $('.select2', this).select2('destroy');
});

2. 禁用Select2的自动选中与自动聚焦行为 #

iOS触摸设备上的自动选中问题，多是因为Select2默认会自动聚焦第一个选项并触发选中。通过初始化选项和自定义模板禁用该行为：

$('.select2').select2({
  dropdownParent: $('#dataModal'),
  width: '100%',
  openOnEnter: false, // 禁用回车键自动打开下拉框
  // 自定义选项模板，避免默认的自动聚焦逻辑
  templateResult: function (result) {
    if (!result.id) return result.text;
    return $('<span></span>').text(result.text);
  }
});

同时添加CSS修正下拉框的定位偏移：

.select2-dropdown {
  position: absolute !important;
  transform: none !important;
  z-index: 99999 !important;
}

3. 临时禁用模态框的焦点强制逻辑（精准控制） #

直接重写enforceFocus会影响模态框的其他焦点行为，改为在Select2打开/关闭时动态切换：

// 保存原始的enforceFocus方法
const originalEnforceFocus = $.fn.modal.Constructor.prototype.enforceFocus;

// Select2打开时禁用模态框的焦点强制
$('.select2').on('select2:opening', function () {
  $.fn.modal.Constructor.prototype.enforceFocus = function() {};
});

// Select2关闭时恢复原始方法
$('.select2').on('select2:closing', function () {
  $.fn.modal.Constructor.prototype.enforceFocus = originalEnforceFocus;
});

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