Question

下面是我的代码（MVC 5），其中我想要一个下拉列表，可以选择多个项目。下拉列表中的每个项目都应该有一个复选框。选择多个项目时，应显示以逗号分隔的项目列表。

我正在使用bootstrap multiselect。

问题 -
下拉列表显示默认项目为“未选择”。单击下拉列表时，不会显示下拉列表 - 但是当页面加载时，我会看到附加的项目列表。我也从页面来源确认了。
下拉列表的默认项目应为“选择一个组”，因为我正在尝试绑定它。但是我不知道如何摆脱这个默认的'None Selected'。

型号：

public List<Group> Groups
{
    get
    {
        List<Group> groups = new List<Group>();
        groups.Add(new Group() { Id = 1, Name = "AA" });
        groups.Add(new Group() { Id = 1, Name = "BB" });
        groups.Add(new Group() { Id = 1, Name = "CC" });
        return groups;
    }
    protected set { }
}

public IEnumerable<SelectListItem> DefaultGroupSelectItem
{
    get
    {
        return Enumerable.Repeat(new SelectListItem{Value = "-1", Text = "Select a Group"}, count: 1);   
    }
}

public IEnumerable<SelectListItem> GroupSelectList
{
    get
    {
        SelectList groupSelectList = new SelectList(Groups, "Id", "Name");
        return DefaultGroupSelectItem.Concat(groupSelectList);
    }
}

[Display(Name = "Group")]
public int[] SelectedGroupIds { get; set; }

控制器：

public ActionResult CreateTest()
{
    UserViewModel userViewModel = new UserViewModel();
    return View(userViewModel);
}

查看：

    @Html.LabelFor(model => model.SelectedGroupIds, new { @class = "control-label col-md-2" })
<div class="col-md-10">
    @Html.DropDownListFor(model => model.SelectedGroupIds,
                                      Model.GroupSelectList,
                                        new {@class = "multiselect", multiple = "multiple"})
    @Html.ValidationMessageFor(model =>model.SelectedGroupIds)
</div>

<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap-select.js"></script>
<script src="~/Scripts/bootstrap-multiselect.js"></script>

<script>
    $(document).ready(function () {        
        $('#SelectedGroupIds').multiselect();        
    });
</script>

任何人都可以指导我缺少的东西吗？

谢谢！

Answer 1

Html.DropDownListFor呈现单个选择。请改为Html.ListBoxFor。

Answer 2

我的不好:-(有两个问题 -

<强>首先
查看我用于绑定到DropDownList的数据源。

  groups.Add(new Group() { Id = 1, Name = "AA" });
  groups.Add(new Group() { Id = 1, Name = "BB" });
  groups.Add(new Group() { Id = 1, Name = "CC" });

Id = 1 的所有项目这就是dropdownlist点击没有得到妥善处理的问题。

<强>第二
一些jQuery和Bootstrap库丢失了 - 这是所需的完整列表：

    <!-- Following css and scripts required for multiselect in Html.DropDownListFor 
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <link href="/Content/bootstrap/bootstrap.less" rel="stylesheet" />
    <link href="/Content/bootstrap-multiselect.css" rel="stylesheet" />
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/bootstrap-multiselect.js"></script>
    -->

另外，为了摆脱默认的'None Selected'，我不得不修改bootstrap-multiselect.js中定义的变量。

HTH。

Answer 3

如果您想使用下拉菜单，请遵循此技巧。

Bootstrap-select将所有选定的值作为单个逗号分隔的字符串返回。在change方法上使用JavaScript或jQuery来选择此字符串并将其指定为隐藏字段作为其值。现在，这个隐藏字段值被设置为选择长字符串。提交表单时，隐藏字段的值也将提交给目标控制器。您可以使用split方法分隔这些值，并根据您的要求使用。

请记住，这只是一个技巧，而不是一种正确的方式。

Answer 4

你必须使用类似的东西：

int[][] arr = new int[Rows][Cols]; int[] arr1D= new int[Rows * Cols]; Rows = arr.length; if (Rows > 0) { Cols = arr[0].length; } else { Cols = 0; } for (int row = 0, count = 0; row < Rows; row++) { for (int col = 0; col < Cols; col++) { arr1D[count] = arr[row][col]; count++; } }

DropDownListFor带有用于多选的复选框

4 个答案: