如何为已存在的Select2组件设置dropdownParent属性

你遇到的这个Firefox下模态框内Select2失焦的问题确实挺常见的，核心原因是Select2的下拉菜单默认挂载在<body>下，和模态框的层级、焦点管理逻辑冲突。直接重新初始化时只传dropdownParent会覆盖原有配置，所以得先保留原来的配置再合并新参数，下面给你两种可行的方案：

方案一：获取现有Select2配置后重新初始化 #

这种方法会先拿到当前Select2实例的所有原有配置，合并dropdownParent参数后重新初始化，能完美保留你原来的数据源URL等配置：

var loadForm = function () {
  var btn = $(this);
  $.ajax({
    url: btn.attr("data-url"),
    // 这里补全你原来的AJAX配置（比如method、data等）
    success: function (data) {
      // 模态框内容加载完成后，定位到目标Select2元素
      var $select = $("#id_project");
      // 获取已初始化的Select2实例的完整配置
      var existingConfig = $select.data('select2').options.options;
      // 先销毁当前的Select2实例
      $select.select2('destroy');
      // 合并原有配置与新的dropdownParent参数，重新初始化
      $select.select2($.extend({}, existingConfig, {
        dropdownParent: $(".modal-body") // 注意选择器是类选择器，你之前少了点号
      }));
    }
  });
};

方案二：首次初始化时提前指定dropdownParent（推荐） #

如果你的模态框是提前渲染的，或者可以在第一次初始化Select2的时候就指定dropdownParent，这样就不用后续修改，更省心：

比如在Django模板的初始化代码里：

$(document).ready(function() {
  $("#id_project").select2({
    ajax: {
      url: "/your-project-data-url/", // 保留你原来的数据源URL
      // 其他原有配置（比如dataType、processResults等）
    },
    dropdownParent: $(".modal-body") // 提前指定下拉菜单的父容器
  });
});

如果是动态加载的模态框，就在模态框内容加载完成后，第一次初始化Select2时就带上dropdownParent参数，从根源避免配置丢失的问题。

关键注意点 #

• 你之前写的$("modal-body")是错误的选择器，应该用类选择器$(".modal-body")，或者如果模态框内容容器有ID的话用$("#modal-body-id")，确保能正确定位到目标容器。
• 如果你用的是Bootstrap模态框，也可以把dropdownParent指定为模态框本身（比如$("#your-modal-id")），下拉菜单会挂载在模态框内部，同样能解决焦点冲突问题。

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