时间戳

首页 > 解决方案 > Bootstrap 4 Multi Select在模态内部不起作用

html - Bootstrap 4 Multi Select在模态内部不起作用

问题描述

我试图让一个引导多选下拉菜单在引导模式中工作。当模态弹出这个 css 时：

select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.selectpicker {
    display: none !important;
}

正在应用于下拉列表：

<select name="adminFoci" class="groupSelect" id="adminFoci" required>
                    <option value="default">Choose a Foci</option>
                    <c:forEach items="${foci}" var="focus">
                        <option name="${focus.focusName}" value="${focus.focusName}">${focus.focusName}</option>
                    </c:forEach>
                </select>

下拉菜单是不可见的，并且通过取消选中display: none !important;这些选项会出现，但是它们不会根据引导程序/选择 css 进行格式化。当下拉菜单放置在模式之外时，它可以正常工作。模态：

<div class="modal fade bd-example-modal-lg" id="adminModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="adminModalTitle">Details</h5>
                    <c:if test="${message != null}">
                        <p>${message}</p>
                    </c:if>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="" method="post" id="modalForm"></form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="modalSubmit" form="modalForm">Save changes</button>
                </div>
            </div>
        </div>
    </div>

任何帮助，将不胜感激。

编辑：我尝试重新初始化 .selectpicker在 DOM 加载和我的模式弹出时的答案中显示的所有三种方式，但没有任何区别。

标签： htmlcssbootstrap-4bootstrap-modal

解决方案

在研究模态之前，我遇到了类似的问题。但是我通过在执行代码之前加载其他任何东西来解决它display: none;

因此，如果我正在处理此问题，请暂时删除此代码：

select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.selectpicker {
    display: none !important;
}

并使用 Javascript/JQuery onload：

$(document).ready(function(){
    $('select.bs-select-hidden, .bootstrap-select select.bs-select-hidden, select.selectpicker').css('display','none');
});

好吧，使用此代码，这些元素将在加载时显示，如果它打扰您，您可以先应用隐藏可见性：

CSS：

select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.selectpicker {
    visibility: hidden;
    /* It's there but invisible, so it loads. */
}

和 Javascript/JQuery：

$(document).ready(function(){
    $('select.bs-select-hidden, .bootstrap-select select.bs-select-hidden, select.selectpicker').css({'visibility':'visible','display':'none'});
});

推荐阅读