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

Bootstrap 3, 4? Which selectpicker? Working snippet? – user8672473 May 19 '19 at 00:29 — user8672473, May 19 '19 at 00:29
bootstrap-3.4.1 multiple-select-0.9.15 – Luis Méndez Méndez May 19 '19 at 01:08 — Luis Méndez Méndez, May 19 '19 at 01:08

score 0 · Answer 1 · answered May 19 '19 at 01:29

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>

Why bootstrap-multiselect closes the dropdown-menu?

1 Answers1