Question

我正在研究MVC 5，有

  @Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "Select", new { @id = "DDLServiceCate", @class = "form-control " })

我想用复选框进行bootstrap multiselect下拉列表。因为，我试过了：

<script src="~/Scripts/bootstrap-multiselect.js"></script>
<link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />

<script type="text/javascript">
    $(function () {
        $('[id*=DDLServiceCate]').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

但实施后，请看下图。

但实际上我想看下面的图像显示。

我该怎么做？

Answer 1

您可以使用此插件。我希望这符合你的要求。

Multiple Select (MultiSelect)

这是有效的fiddle。

这是一个工作样本。

＆＃13;

<html>
<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
        });

        $('#btnSelected').click(function () {
            var selected = $("#lstFruits option:selected");
            var message = "";
            selected.each(function () {
                message += $(this).text() + " " + $(this).val() + "\n";
            });
            alert(message);
        });
    });
</script>

<body>
    <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" />
</body>

</html>

＆＃13;

Answer 2

我做完了，

<script src="~/Scripts/bootstrap-multiselect.js"></script>  
    <link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />  
  
<script type="text/javascript">  
  $(function () {  
        $('[id*=DDLServiceCate]').multiselect({  
            includeSelectAllOption: true, buttonWidth: '200px'  
        });  
    });  
</script>

在里面的drowpdown我添加了'@multiple =“multiple”'

@Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "None selected ", new { @id = "DDLServiceCate", @class = "form-control", @multiple = "multiple" })

现在在drowpdownlistfor中显示复选框。

如何通过bootstrap multiselect创建带复选框的下拉列表？

2 个答案: