Why Select 2 jquery plugin doesn't the work inside the Bootstrap modal? But it works normally in any part of a page outside the scope of modal

$(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>

I am trying to run the Select 2 jquery plugin inside Bootstrap modal, but it does not work inside the modal and only works outside the scope of the modal. I have tried many solutions to the same current problem from within this site, but all of them did not work. Please help me

Solution

You must add dropdownParent:.select2({ dropdownParent: ... })

$(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>