为什么 Select 2 jquery 插件不能在 Bootstrap 模式中工作？但它在页面的任何部分都可以正常工作，超出 modal

Question

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

<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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

我正在尝试在 Bootstrap 模式中运行 Select 2 jquery 插件，但它在模式内部不起作用，只能在模式范围之外工作。我已经从该站点尝试了许多解决当前相同问题的方法，但是所有方法都没有用。请帮助我

Answer 1

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

<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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>