Select2在bootstrap模式中无法正确显示

Question

I'm trying to use select2 to display a dropdown in a modal. The dropdown isn't showing as expected, this is how it's showing below.

If i place my Select outside of the modal, it works fine, like this

Here's my HTML code:

<div class='modal fade' id='comm".$row[' issue_id ']."'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title'>Add Comments</h5>
        <button type='button' class='close' data-dismiss='modal'><span>&times;</span></button>
      </div>
      <div class='modal-body'>
        <p>Add Comments to this Incident</p>
        <form method='post' action='processing.php'>
          <textarea type='text' cols='40' name='comments' required></textarea>
          <input type='hidden' name='issue_id' value='".$row[' issue_id ']."'><br>
          <input type='hidden' name='url' value='".$url."'><br>
          <select class='js-example-basic-multiple' name='tag[]' multiple='multiple'>
            <option value='AL'>Alabama</option>
            <option value='WY'>Wyoming</option>
          </select>
          <br><button type='submit' class='btn btn-primary' name='submit_comm'>Submit</button>
        </form><br>
      </div>
      <div class='modal-footer'>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
    });
</script>

</div>

Answer 1

I think you need to attach the dropdown to the modal. Try something like this:

 <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    ...
    <select id="mySelect2">
        ...
    </select>
    ...
</div>

...

<script>
    $('#mySelect2').select2({
        dropdownParent: $('#myModal')
    });
</script>

I got this from here: https://select2.org/troubleshooting/common-problems

Please read the article above for more information about this problem !