when I use multiselect independently, it works well.
but when I put it in a bootstrap dropdown-menu, as we know, if we click on the dropdown-menu, it's window will be closed.
so I use stopPropagation() to stop click event progating to dropdown-menu, however, by doing this, the multiselect failed working, while the 'test' can call the function test() correctly.
my code is as 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 the same problem, and found this bootstrap plugin that takes care of all that. It'll keep the dropdown open for a multiple select. The snippet seems to 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 to have issues presenting the mutliselect properly.
conclusion:
@see dropdown source link
the dropdown event will proppagating to document as
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
}(jQuery);
so there has no method to put multiselect in a Bootstrap dropdown-menu.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.