jquery - 如何使 bootstrap-multiselect 不可见我的默认值？

Question

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

基本上，我有一个复选框，当选中此复选框时，我会显示下拉菜单。当取消选中它时，菜单应该隐藏。默认情况下该复选框处于未选中状态，因此我希望默认情况下也隐藏菜单。

我尝试使用基本的 css 代码隐藏菜单到我的选择菜单，如下所示:

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

但这似乎被引导多选中的某些内容覆盖。如果我删除插件，显示/隐藏功能可以正常工作，没有问题。

这是我当前的菜单代码

    $(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: hide; display:none;'); 添加到 $("#lated_calls_menu")

我也尝试过添加此代码

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

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

这是复选框之前的屏幕截图

这是复选框后的屏幕截图

请多多指教。

Answer 1

Select 标签已被 bootstrap 隐藏。

像这样在你的选择标签周围放置一个包装 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();