javascript - Bootstrap multiselect used in a Bootstrap dropdown-menu -

when use multiselect independently, works well.

but when put in bootstrap dropdown-menu, know, if click on dropdown-menu, it's window closed.

so use stoppropagation() stop click event progating dropdown-menu, however, doing this, multiselect failed working, while 'test' can call function test() correctly.

my code follows:

<ul class='dropdown-menu dropdown-menu-right'>   <li>     <div class='container-fluid'>       <div class='row' id='filter-container'>         <div class='col-md-12'>           <h4><a onclick='test();'>test</a></h4>           <select id='example-getting-started' multiple='multiple'>             <option value='aaaaaa'>bbbbbb</option>             <option value='cccccc'>cccccc</option>             <option value='dddddd'>dddddd</option>             <option value='eeeeee'>eeeeee</option>           </select>         </div>       </div>     </div>   </li> </ul>     $('#filter-container').click(function(e) {   e.stoppropagation(); }); 

i came upon same problem, , found this bootstrap plugin takes care of that. it'll keep dropdown open multiple select. snippet seems have issues pr

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <link href="https://raw.githubusercontent.com/silviomoreto/bootstrap-select/master/dist/css/bootstrap-select.min.css" rel="stylesheet"/>        <select class="selectpicker" multiple>    <option>mustard</option>    <option>ketchup</option>    <option>relish</option>  </select>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  <script src="https://raw.githubusercontent.com/silviomoreto/bootstrap-select/master/dist/js/bootstrap-select.min.js"></script>

the snippet seems have issues presenting mutliselect properly.