如何使 bootstrap-multiselect 我的默认设置不可见？

Question

我正在使用bootstrap-multiselect 插件来更轻松地处理下拉菜单。但是，我在尝试默认隐藏菜单时遇到问题。

基本上，我有一个复选框，当此复选框是检查然后我展示下拉男子。当它被取消选中时，菜单应该被隐藏。该复选框默认未选中，因此我希望菜单也默认隐藏。

我尝试使用基本的 CSS 代码将菜单隐藏到我的选择菜单中，如下所示：

<select name="menu" id="related_calls_menu" style="display: none;" multiple="multiple">....</select>

但这似乎被 bootstrap-multiselect 中的某些内容覆盖。如果我删除插件，则显示/隐藏功能可以正常工作。

这是我当前的菜单代码

    $(function(){

        $("#related_calls_menu").multiselect({
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            selectedClass: null,
            selectAllText: 'Select All',
            includeSelectAllOption: true,
            nonSelectedText: 'Select Related Account(s)',
            buttonWidth: '300px'
         });

        $(window).load(function(){
            $("#related_calls_menu").hide();
        });

        $('#complete_related_calls').click(function(){

            if( $(this).is(':checked') )
                $("#related_calls_menu").show();
            else
                $("#related_calls_menu").hide();
        });
    });

我已尝试将.css('visability: hidden; display:none;'); 添加到 $("#related_calls_menu")

我也试过添加这段代码

    $(window).on('load', function(){
        $("#related_calls_menu").hide();
    });

没有什么真正起作用，我似乎无法隐藏菜单。此外，当我单击复选框以显示菜单时，我会看到第二个菜单，它没有插件外观。

这是复选框前的屏幕截图

这是复选框后的屏幕截图

请指教。

Answer 1

选择标签已被引导程序隐藏。

像这样在你的选择标签周围放置一个包装器 div

<div id="mywrapper">
  <select name="menu" id="related_calls_menu" style="display: none;" multiple="multiple">....                    </select>
</div>

然后您可以像这样控制包装 div：

CSS：

#mywrapper{
display:none;
}

jQuery

$("#mywrapper").show();
$("#mywrapper").hide();

Answer 2

可能有一些 CSS 代码与 bootstrap-select 冲突。

使用浏览器检查元素，转到“计算”并验证设置元素“显示”属性的内容。

如果你有紧急情况，你可以设置

#related_calls_menu{
  display: none!important;
}

在你的样式表中，直到你解决这个问题。