为什么我的 select 下拉菜单在打开 Bootstrap 模式时默认打开？

Question

我使用 Bootstrap 模态和全日历。当我点击某一天打开模式时。

在表单中，我有默认打开的下拉菜单 select。当我 select 一个选项时，它不会关闭。

我认为 modal show 与 select show 功能冲突。当我检查并检查 .show .dropdown-menu 的 display: block 时，问题解决了，但它是暂时的。

$('#select-modal').modal('show');

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="modal fade" id="select-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="title" id="largeModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" id="select-from">
          <div class="col-lg-4 col-md-4 col-sm-8">
            <select name="pets" id="pet-select">
              <option value="">--Please choose an option--</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-simple btn-round waves-effect" data-dismiss="modal">CLOSE</button>
        <button type="button" class="btn mid-pink btn-round waves-effect">SAVE CHANGES</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Answer 1

终于，我解决了这个问题。问题来自 .dropdown-menu，其中 display: block.

在 dayClick 我添加了这段代码：

  $('#select-modal').modal('show');

  $('.dropdown-menu').addClass('d-none');

现在可以正常使用了。

为什么我的 select 下拉菜单在打开 Bootstrap 模式时默认打开？

Why is my select dropdown open by default while opening Bootstrap modal?

select

twitter-bootstrap

bootstrap-modal

bootstrap-4