Why bootstrap-multiselect closes the dropdown-menu?

Question

In a nav-bar I have a dropdown-menu, in which I occupy bootstrap-multiselect. When I occupy a normal select it works fine, but I integrate the bootstrap-multiselect and closes the dropdown-menu

I work in codeigniter, I load the multiselect with a getJSON function from an api, which works well with a normal select

this is the html code

    <nav class="navbar navbar-default navbar-expand-lg navbar-light navbar-fixed-top">

            <ul class="nav navbar-nav navbar-right ml-auto">
                <li class="nav-item">
                    <a id="btn_navbar" href="#" data-toggle="dropdown"
                        class="btn btn-primary dropdown-toggle get-started-btn mt-1 mb-1">Button</a>
                    <ul class="dropdown-menu form-wrapper">
                        <li>
                            <form>
                                <div class="form-group">
                                    <label for="select_establecimiento">Colegio</label>
                                    <select class="form-control" id="select_establecimiento">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="select_mes">Mes</label>
                                    <select class="form-control" id="select_mes">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="select_periodo">Periodo</label>
                                    <select class="form-control" id="select_periodo">
                                    </select>
                                </div>
                                <button id="change" class="btn btn-primary btn-md btn-block">Cambiar</button>
                                <button id="logout" class="btn btn-info btn-md btn-block">Salir</button>
                            </form>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

this is the javascript code

function select_establecimiento() {
    $.getJSON('get_establecimiento', function (result) {
        var mySelect = $('#select_establecimiento').empty();
        $.each(result.data, function (index, value) {
            mySelect.append(new Option(value.name, value.id));
        })
        mySelect.multiselect({
            buttonWidth: '100%',
            refresh: true
        });
    })
}

Answer 1

Here is working snippet. Bootstrap dropdown closes after every click, so it will close if you try to open another dropdown (multiselect).

Your problem mixed with this: Avoid dropdown menu close on click inside

  var result = {data: [ {name: "aaa", id: 0}, {name: "bbb", id: 1}, {name: "ccc", id: 2}, ] } var mySelect = $('#select_establecimiento').empty(); $.each(result.data, function (index, value) { mySelect.append(new Option(value.name, value.id)); }) mySelect.multiselect({ buttonWidth: '100%', refresh: true }); $('#btn_navbar').on('click', function (event) { $(this).parent().toggleClass('open'); }); $('body').on('click', function (e) { if (!$('.dropdown.form-wrapper').is(e.target) && $('.dropdown.form-wrapper').has(e.target).length === 0 && $('.open').has(e.target).length === 0 ) { $('.dropdown.form-wrapper').removeClass('open'); } }); 

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Include the plugin's CSS and JS: --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/> <nav class="navbar navbar-default navbar-expand-lg navbar-light navbar-fixed-top"> <ul class="nav navbar-nav navbar-right ml-auto"> <li class="nav-item"> <a id="btn_navbar" href="#" class="btn btn-primary dropdown-toggle get-started-btn mt-1 mb-1">Button</a> <ul class="dropdown-menu form-wrapper"> <li> <form> <div class="form-group"> <label for="select_establecimiento">Colegio</label> <select class="form-control" id="select_establecimiento"> </select> </div> <div class="form-group"> <label for="select_mes">Mes</label> <select class="form-control" id="select_mes"> </select> </div> <div class="form-group"> <label for="select_periodo">Periodo</label> <select class="form-control" id="select_periodo"> </select> </div> <button id="change" class="btn btn-primary btn-md btn-block">Cambiar</button> <button id="logout" class="btn btn-info btn-md btn-block">Salir</button> </form> </li> </ul> </li> </ul> </nav>