9

我正在开发 MVC4 项目，我有一个多选下拉菜单

@Html.DropDownList("year_selected", (SelectList)(ViewData["YearSelected"]), new { tabindex = "14", multiple = "multiple", style = "width:150px;height:200px;" })

它填充了我在控制器中提到的年份列表

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;

并在下拉菜单中单击我正在调用 jquery 以选择该特定值，并且在加载页面时我通过使它们默认选择来检查保存在数据库中的值

这是用于选择保存在数据库中的值的 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);
    }
}

这是我用来在用户单击或在下拉值上按 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);
});

一切都很完美。但现在的问题是用户想要下拉列表中的复选框，以便可以检查该选项。

我该怎么做呢 ？

4

3 回答 3

8

您可以在 div 中使用带有 CSS 的复选框，而不是使用下拉菜单。它会像一个带有复选框的下拉列表一样落下。

这是jquery的好链接

http://www.erichynds.com/blog/jquery-ui-multiselect-widget

于 2013-09-05T05:50:17.567 回答
6

用户想要下拉列表中的复选框，以便可以检查该选项。

有一个很棒的 JQuery 插件Dropdown Check List，可以将常规选择 HTML 元素转换为下拉复选框列表。

在此处输入图像描述

下载

于 2013-09-05T05:44:56.470 回答
1

本教程显示了完整的分步指南，用于在 mvc 中使用复选框创建多选下拉 菜单 在 MVC中使用复选框创建多选下拉菜单

您需要选择标签

<select id="CustomerId" name="CopyFromCustomerId"></select>

或者你可以使用Html.ListBoxFor

您需要以下脚本

$('#CustomerId').multiselect({
            includeSelectAllOption: true
        });

在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"/>
于 2016-08-10T11:04:35.787 回答