twitter-bootstrap 如何通过引导多选创建带有复选框的下拉列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42991619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I create dropdown with checkbox by bootstrap multiselect?
提问by AbhiJA
I am working on MVC 5, there is have
我正在开发 MVC 5，有
@Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "Select", new { @id = "DDLServiceCate", @class = "form-control " })I want to do bootstrap multiselect dropdown with checkbox. For, I have tried:
我想用复选框做引导多选下拉菜单。因为，我试过：
<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>But after implementing this, look like below image.
但是在实现这个之后，看起来像下图。
But actually I want look like below image showing.
但实际上我想要看起来像下图所示。
How can I do this ?
我怎样才能做到这一点 ？
回答by Nitheesh
You can use this plugin. I hope this will fit your requirement.
你可以使用这个插件。我希望这将符合您的要求。
This is the working fiddle.
这是工作小提琴。
Here is a working sample.
这是一个工作示例。
<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>回答by AbhiJA
I have done,
我已经做好了，
<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> And Inside drowpdown I have added '@multiple = "multiple"'
在下拉列表中，我添加了 '@multiple = "multiple"'
@Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "None selected ", new { @id = "DDLServiceCate", @class = "form-control", @multiple = "multiple" }) Now showing checkboxes inside drowpdownlistfor.
现在在drowpdownlistfor 中显示复选框。
