使用带复选框的多选下拉菜单答案

【问题标题】：Use multiselect dropsown with checkbox使用带复选框的多选下拉菜单
【发布时间】：2017-02-28 22:36:19
【问题描述】：

我有很多 jQuery 插件，但是当我在我的引导项目中尝试时，它无法正常工作。您能否建议我在带有源代码的 JSP 示例中使用带有复选框的 Bootstrap multiselect 下拉菜单。

我正在使用以下代码..它在我的模板中不起作用。它只显示简单的下拉菜单。

<select id="lstFruits" multiple="multiple">
    <option value="1">Mango</option>
    <option value="2">Apple</option>
    <option value="3">Banana</option>
    <option value="4">Guava</option>
    <option value="5">Orange</option>
</select>
<input type="button" id="btnSelected" value="Get Selected" />    

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
    rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
    type="text/javascript"></script>

<script type="text/javascript">
$(function () {
    $('#lstFruits').multiselect({
        includeSelectAllOption: true
    });
});
</script>

【问题讨论】：

固定代码格式。

标签： javascript jquery html jsp angular-ui-bootstrap

【解决方案1】：

上面的代码示例（已编辑，最新）对我来说似乎可以正常工作。请注意，Bootstrap Multiselect 插件推荐使用 jQuery 2.x 或 1.10.x；您使用的是 1.8.3。

此外，包装 $(function() { ... }); 对于您要完成的工作可能不是必需的。

【讨论】：