Bootstrap 4 Multi Select在莫代尔内部不起作用

编程问答 2022-06-12

问题描述

我正在尝试在Bootstrap模式中使用bootstrap多选下拉菜单。当模式弹出弹出此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>

任何帮助将不胜感激。

编辑：我尝试了re-initializing .selectpicker答案中显示的所有三种方式，无论是在DOM加载还是在弹出模式时，都没有区别。

解决方法

在研究模态之前，我遇到了类似的问题。但是我通过在执行代码// used as receiver object class Zar(var v:Int) {} // base class to represent all functions open class Func // 2 function examples,all function signatures will be 1 level deep inheritance. class Function2IntToInt : Func() { val func = fun Zar.(x:Int,y:Int): Int { return x+y+v} } //clarification: fixed example used above,could also have been: //class Function2IntToInt(var func: Zar.(Int,Int)->Int) : Func() {} class FunctionStringToInt : Func() { val func = fun (s:String): Int { return s.length} } fun main() { var a = Zar(1) // these 2 could be stored into a collection of type Map<String,Func> var func:Func = Function2IntToInt() var func2:Func = FunctionStringToInt() // function retrieval var func3:Func = func // casting. It could fail if function storage was mismatched,but not here. var iface = func3 as Function2IntToInt var f = iface.func println("Invocation: result must match 3: " + a.f(1,1)) }

之前加载了其他任何东西来解决了这个问题

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

display: none;

并使用Javascript / JQuery onload：

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

好吧，使用此代码，那些元素将在加载时显示，如果麻烦您，您可以先应用隐藏的可见性：

CSS：

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

和Javascript / JQuery：

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

我正在使用AJAX加载从Spring控制器返回的部分视图。我的模态是部分加载到主页上的模态，因此，我相信由于选择器在模态渲染之前已初始化，因此auto O_or_dot = [](char c) { return c == 'O' || c == '.'; }; if (not std::ranges::all_of(currentgen | std::views::join | std::views::join,O_or_dot)) cerr << program_name << ": Bad Character in: "<<file_name<< "\n"; 不能正常工作，因为脚本已包含在主页中。 >

通过将以下内容添加到我的部分模式视图中，我已经能够使选择选择器正确初始化。

$('.selectpicker').selectpicker();
bootstrap-4bootstrap-modalhtml