为什么bootstrap-multiselect会关闭下拉菜单？

Question

在导航栏中，我有一个下拉菜单，在这个菜单中，我使用bootstrap-multiselect。当我占据一个普通的选择时，它工作得很好，但我集成了bootstrap-multiselect并关闭了下拉菜单

我在codeigniter中工作，我使用api中的getJSON函数加载multiselect，它与普通的select一起工作得很好。

这是html代码

    <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>

这是javascript代码

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

下面是可用的代码片段。Bootstrap dropdown在每次单击后都会关闭，因此如果您尝试打开另一个下拉列表(multiselect)，它也会关闭。

您的问题与此混合在一起：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>

​