Modal中Select2搜索框失效且点击后模态框消失问题求助

我之前也踩过这个坑，Bootstrap模态框和Select2的兼容性问题确实挺头疼的，给你整理了一套亲测有效的解决方法：

1. 正确配置dropdownParent并阻止事件冒泡 #

设置dropdownParent是让Select2下拉框挂载在模态框内部的关键，但直接设置会导致点击下拉时触发模态框的关闭事件——因为模态框会监听点击自身外部区域来关闭，而Select2下拉框的点击事件会冒泡到模态框上。

解决方法是：

• 初始化Select2时指定dropdownParent为你的模态框元素
• 给Select2的下拉容器添加事件监听，阻止点击事件冒泡

代码示例：

// 初始化Select2
$('#your-select2-id').select2({
  dropdownParent: $('#modal_penguasaan'),
  placeholder: '请选择选项',
  // 其他Select2配置项...
});

// 阻止Select2下拉框的点击事件冒泡到模态框
$('#modal_penguasaan').on('click', '.select2-dropdown', function(e) {
  e.stopPropagation();
});

2. 修复模态框的焦点劫持问题 #

Bootstrap模态框默认有个enforceFocus方法，会强制把焦点拉回模态框内，这直接导致Select2的搜索框无法获取焦点。你之前的重写可能时机不对，试试这两种方式：

方式一：全局重写（适合多个模态框用Select2的场景） #

要确保这段代码在模态框初始化之前执行：

// 禁用模态框的强制焦点劫持
$.fn.modal.Constructor.prototype.enforceFocus = function() {};

方式二：针对单个模态框临时禁用（更友好，不影响其他模态框） #

这种方式会在模态框显示时禁用enforceFocus，隐藏时恢复原方法：

$('#modal_penguasaan').on('show.bs.modal', function() {
  // 保存原方法
  const originalEnforceFocus = $.fn.modal.Constructor.prototype.enforceFocus;
  // 临时禁用强制焦点
  $.fn.modal.Constructor.prototype.enforceFocus = function() {};
  
  // 模态框隐藏时恢复原方法
  $(this).on('hidden.bs.modal', function() {
    $.fn.modal.Constructor.prototype.enforceFocus = originalEnforceFocus;
  });
});

3. 确保Select2下拉框的层级高于模态框 #

有时候即使配置了dropdownParent，下拉框还是会被模态框盖住，这时候可以自定义Select2的z-index：

.select2-dropdown {
  z-index: 99999 !important;
}

这个值要比Bootstrap模态框默认的z-index（1050）大很多，确保下拉框能显示在最上层。

把这三步结合起来，就能同时解决Select2搜索框失效和点击下拉模态框消失的问题了！

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