jQuery mvc4 razor 中带有复选框的多选下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18627772/
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
Multiselect dropdown with checkbox in mvc4 razor
提问by Mahajan344
I am working on MVC4 project where i have a multi select dropdown
我正在 MVC4 项目中工作，我有一个多选下拉菜单
@Html.DropDownList("year_selected", (SelectList)(ViewData["YearSelected"]), new { tabindex = "14", multiple = "multiple", style = "width:150px;height:200px;" })
Its populated with list of years i have mentioned in controller
它填充了我在控制器中提到的年份列表
int minYear =Int32.Parse(Helper.MinYear);
int maxYear = Int32.Parse(Helper.MaxYear);
var yearSelectedList = new List<SelectListItem>();
for (int count = minYear; count <= maxYear; count++)
{
yearSelectedList.Add(new SelectListItem()
{
Text = count.ToString(),
Value = count.ToString()
});
}
var yearselectlist = new SelectList(yearSelectedList, "Value", "Text");
ViewData["YearSelected"] = yearselectlist;
and on dropdown click i am calling jquery to select that particular value and also when page is loaded i checking values saved in database by making them select by default
并在下拉单击我调用 jquery 以选择该特定值，并且当页面加载时，我检查保存在数据库中的值，使它们默认选择
Here is jquery code to selected the values which are saved in database
这是选择保存在数据库中的值的jquery代码
if (str_year_selected.val() != "") {
var yeararray = str_year_selected.val().split(",");
for (var i in yeararray) {
var val = yeararray[i];
year_selected.find('option:[value=' + val + ']').attr('selected', 1);
}
}
and here is code i am using to select the value when user clicks or press ctrl key on dropdown values
这是我用来在用户单击或在下拉值上按 ctrl 键时选择值的代码
year_selected.change(function () {
var selectedyears = "";
$("#year_selected :selected").each(function (i) {
if (i != 0) {
selectedyears += ",";
}
selectedyears += $(this).text();
});
str_year_selected.val(selectedyears);
});
Everything is working perfect . but now problem is user wants checkbox inside of dropdown so that can check the option.
一切正常。但现在问题是用户想要下拉列表中的复选框，以便可以检查该选项。
How do i do this ?
我该怎么做呢 ？
采纳答案by Abbas Amiri
user wants checkbox inside of dropdown so that can check the option.
用户需要下拉列表中的复选框，以便可以检查该选项。
There is a fantastic JQuery Plugin called Dropdown Check Listthat transforms a regular select HTML element into a dropdown checkbox list.
有一个很棒的 JQuery 插件称为Dropdown Check List将常规选择 HTML 元素转换为下拉复选框列表。
回答by ????
Rather than using dropdown you can use checkbox in div with css. It will fell like it is a dropdown list with checkbox.
您可以在带有 css 的 div 中使用复选框，而不是使用下拉列表。它会像一个带有复选框的下拉列表一样下降。
Here is good link of jquery
这是jquery的好链接
回答by PVivek
This tutorial shows complete step by step guide for creating multiselect dropdown with checkboxes in mvc Multiselect dropdown with checkboxes in MVC
本教程展示了在 MVC 中使用复选框创建多选下拉列表的完整分步指南
You Need Select Tag
您需要选择标签
<select id="CustomerId" name="CopyFromCustomerId"></select>
or you can use Html.ListBoxFor
或者你可以使用 Html.ListBoxFor
You need following script
您需要以下脚本
$('#CustomerId').multiselect({
includeSelectAllOption: true
});
And below css and script files
和下面的css和脚本文件
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
