Select2在引导模式下无法正确显示

Question

我正在尝试使用select2在模式中显示下拉列表。 下拉菜单未如预期那样显示，这就是下面的显示方式。

如果我将我的Select放置在模态之外，则可以正常工作

这是我的HTML代码：

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

Answer 1

<div id="myModal" class="modal fade" role="dialog" aria-hidden="true">

从模式中删除tabindex =“-1”，然后像执行$('.js-example-basic-multiple').select2();一样初始化select2

Answer 2

我认为您需要将下拉列表附加到模式中。尝试这样的事情：

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

...

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

我从这里得到的： https://select2.org/troubleshooting/common-problems

请阅读上面的文章以获取有关此问题的更多信息！

Answer 3

在将select2与引导程序结合使用时，此代码位于asset / stylesheets / application.scss中，可以为我解决所有问题

@import "bootstrap-sprockets"; 
@import "bootstrap";
@import "select2";
@import "select2-bootstrap";