为何Select2 jQuery插件在Bootstrap模态框内无法正常工作？

我尝试在Bootstrap模态框中运行Select2 jQuery插件，但该插件仅在模态框外的页面区域能正常工作，在模态框内无法正常运行。已尝试多个针对该问题的解决方案，但均未奏效，恳请技术协助。

提供的代码 #

JavaScript #

$(document).ready(function() {
    $('.js-example-basic-single').select2();
    dropdownParent: $('#exampleModal')
});

HTML #

<div class="container text-center">
      <div class="row">
        <div class="col-sm"></div>
        <div class="col-sm">
          <div class="card text-center">
            <div class="card-header">
            </div>
            <div class="card-body">
              <select class="form-select js-example-basic-single" aria-label="Default select example">
                <option selected>--select--</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
              </select>
              <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    inside modal
                </button>
                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body">
                        <select class="form-select js-example-basic-single" aria-label="Default select example">
                          <option selected>--select--</option>
                          <option value="1">One</option>
                          <option value="2">Two</option>
                          <option value="3">Three</option>
                        </select>
                      </div>
                      <div class="modal-footer">
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div class="card-footer text-muted">
            </div>
          </div>
        </div>
        <div class="col-sm"></div>
      </div>
    </div>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

问题分析 #

你的代码存在三个核心问题：

1. Select2配置语法错误：dropdownParent作为Select2的配置项，被错误地写在了select2()方法外部，导致配置未生效。
2. 重复引入Bootstrap JS：同时加载了bootstrap.bundle.min.js（已包含Popper.js）和bootstrap.min.js+popper.min.js，会引发脚本冲突。
3. 模态框层级遮挡：未指定dropdownParent时，Select2下拉菜单会渲染到模态框外部，被模态框的z-index或overflow属性遮挡，无法交互。

修复方案 #

修正后的JavaScript代码 #

$(document).ready(function() {
    // 初始化所有Select2，指定下拉菜单父容器为模态框
    $('.js-example-basic-single').select2({
        dropdownParent: $('#exampleModal')
    });

    // 针对模态框显示事件，确保动态元素也能正常初始化
    $('#exampleModal').on('shown.bs.modal', function() {
        $(this).find('.js-example-basic-single').select2({
            dropdownParent: $(this)
        });
    });
});

修正后的HTML代码（移除重复脚本） #

<div class="container text-center">
    <div class="row">
        <div class="col-sm"></div>
        <div class="col-sm">
            <div class="card text-center">
                <div class="card-header"></div>
                <div class="card-body">
                    <select class="form-select js-example-basic-single" aria-label="Default select example">
                        <option selected>--select--</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                        inside modal
                    </button>
                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <select class="form-select js-example-basic-single" aria-label="Default select example">
                                        <option selected>--select--</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                                <div class="modal-footer"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-muted"></div>
            </div>
        </div>
        <div class="col-sm"></div>
    </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

关键注意事项 #

• dropdownParent的作用：将Select2下拉菜单渲染到模态框内部，避免被模态框的样式遮挡。
• 移除重复脚本：bootstrap.bundle.min.js已包含Popper.js，无需单独引入popper.min.js和bootstrap.min.js。
• 模态框显示事件监听：如果模态框是动态生成的（如AJAX加载），必须在shown.bs.modal事件触发后初始化Select2，确保元素已完全渲染。

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