为什么在打开Bootstrap模式时默认打开我的选择下拉列表

Question

我使用Bootstrap模式和fullcalendar。当我点击打开模态的一天时。

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

我认为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');

现在它正在发挥作用。