Bootstrap模态框切换后Select2资源加载失败求助

核心问题分析 #

1. 资源重复加载与冲突：每次加载模态框都重复引入Select2的CSS/JS，浏览器可能因缓存或重复请求忽略后续加载，同时冗余代码易引发冲突；
2. 动态元素未初始化：forms-selects.js中的初始化逻辑仅在页面首次加载时执行，AJAX动态加载的editModal内的select2元素无法触发初始化；
3. 模态框内容残留：关闭模态框时未清空容器内容，旧DOM元素/事件会干扰新模态框的渲染。

分步修复 #

1. 全局统一引入资源 #

将Select2的CSS和JS移至modal_page.php的全局位置，避免重复加载：

<!-- 在modal_page.php的<head>标签内添加 -->
<link rel="stylesheet" href="assets/vendor/libs/select2/select2.css" />

<!-- 在modal_page.php的</body>标签前添加 -->
<script src="assets/vendor/libs/select2/select2.js"></script>
<script src="assets/js/forms-selects.js"></script>

注意：根据modal_page.php的实际位置调整资源路径

2. 重构Select2初始化逻辑 #

修改forms-selects.js，将初始化逻辑封装为可重复调用的函数，适配动态加载的元素：

'use strict';

// 封装Select2初始化函数
function initSelect2() {
  // 仅初始化未被Select2处理过的元素
  const select2 = $('.select2:not(.select2-hidden-accessible)');
  if (select2.length) {
    select2.each(function () {
      var $this = $(this);
      // 避免重复包裹容器
      if (!$this.parent().hasClass('position-relative')) {
        $this.wrap('<div class="position-relative"></div>');
      }
      $this.select2({
        placeholder: 'Select value',
        dropdownParent: $this.parent()
      });
    });
  }

  // 处理带图标的Select2（可选）
  const select2Icons = $('.select2-icons:not(.select2-hidden-accessible)');
  if (select2Icons.length) {
    function renderIcons(option) {
      if (!option.id) return option.text;
      return `<i class='${$(option.element).data('icon')} me-2'></i>${option.text}`;
    }
    select2Icons.each(function() {
      var $this = $(this);
      if (!$this.parent().hasClass('position-relative')) {
        $this.wrap('<div class="position-relative"></div>');
      }
      $this.select2({
        templateResult: renderIcons,
        templateSelection: renderIcons,
        escapeMarkup: es => es
      });
    });
  }
}

// 页面首次加载时初始化
$(function () {
  const selectPicker = $('.selectpicker');
  if (selectPicker.length) selectPicker.selectpicker();
  initSelect2();
});

3. 调整模态框加载与清理逻辑 #

修改modal_page.php中的模态框脚本，确保加载完成后初始化Select2，并在关闭时清空内容：

// 加载addModal
$(document).on("click", ".add_modal", function () {
  $("#addModal-external")
    .empty()
    .load("../action/add/modal/add_modal", function() {
      initSelect2(); // 动态元素加载后初始化
    });
  $('#addModal').modal('show');
}); 

// 加载editModal
$(document).on("click", ".edit_modal", function () {
  var id = $(this).data('id');
  $("#editModal-external")
    .empty()
    .load("../action/edit/modal/edit_modal?id=" + id, function() {
      initSelect2(); // 动态元素加载后初始化
    });
  $('#editModal').modal('show');
});

// 关闭模态框时清空内容，避免残留
$(document).on('hidden.bs.modal', '.modal', function () {
  $(this).find('.modal-dialog').empty();
});

4. 移除模态框局部的资源引入 #

从add_modal和edit_modal文件中删除以下代码，消除重复加载：

<link rel="stylesheet" href="../../../assets/vendor/libs/select2/select2.css" />
<script src="../../../assets/vendor/libs/select2/select2.js"></script>
<script src="../../../assets/js/forms-selects.js"></script>

关键说明 #

• 全局引入资源确保CSS/JS仅加载一次，避免浏览器缓存冲突；
• 封装初始化函数，适配AJAX动态加载的元素；
• 关闭模态框时清空内容，彻底清除旧元素与事件的干扰；
• 通过not(.select2-hidden-accessible)过滤已初始化的元素，防止重复初始化报错。

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