jquery - mvc4 razor 中带有复选框的多选下拉菜单

Question

我正在开发 MVC4 项目，其中有一个多选下拉列表

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

它填充了我在 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;

在下拉菜单中单击我调用 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);
});

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

我该怎么做？

Answer 1

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

这是jquery的良好链接

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