Question

我正在开发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);
});

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

我该怎么做？

Answer 1

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

这是jquery的好链接

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

Answer 2

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

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

enter image description here

Download

Answer 3

此链接在下拉列表中有复选框，我希望此链接最适合您的问题。 http://wenzhixin.net.cn/p/multiple-select/#setselects-getselects

Answer 4

本教程显示了使用mvc中的复选框创建多选下拉列表的完整分步指南 Multiselect dropdown with checkboxes in 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"/>

多选下拉列表，带有mvc4剃刀中的复选框

4 个答案: