'How to make bootstrap-multiselect invisible my default?

I am using the bootstrap-multiselect plugin to make dealing with drop down menu easier. However, I am having an issue when trying to make the menu hidden by default.

Basically, I have a check box, when this check box is check then I display the drop down men. And when it is unchecked the menu should become hidden. The check box is unchecked by default so I want the menu to be hidden by default as well.

I tried to hide the menu using basic css code to my select menu like so: 

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

But this seems to be overridden by something in the bootstrap-multiselect. If I remove the plugin the the show/hide function works fine with no issue.

This is my current code for the menu

    $(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();
        });
    });

I have tried adding .css('visability: hidden; display:none;'); to $("#related_calls_menu")

I have also tried adding this code 

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

Nothing is really working, I can't seems to hide the menu what so ever. Also, when I click on the check box to show the menu I get a second menu that it does not have plugin look.

here is a screenshot BEFORE the check box

enter image description here

here is a screenshot AFTER the check box

enter image description here

Please Advise.

jqueryshow-hidemulti-selectjquery-multiselect


Solution 1:[1]

The Select tag is already hidden by bootstrap.

put a wrapper div around your select tag like this 

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

then you can control the wrapping div like this:

CSS:

#mywrapper{
display:none;
}

jQuery

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

Solution 2:[2]

There might be some CSS code conflicting with bootstrap-select.

Inspect the element with your browser, go to "computed" and verify what is setting the "display" propriety of the element.

enter image description here

If you are on an emergency, you might set

#related_calls_menu{
  display: none!important;
}

in your stylesheet until you have this solved.

Solution 3:[3]

This may be an old post - however looks like you may have linked the JS file but not included the CSS - when I didn't link the CSS it caused this exact issue.

Make sure to link both of the below and see if that resolves it:

<!-- Include the plugins CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dola
Solution 2 lfarroco
Solution 3

Related Questions