Jquery DropDownListFor带有多个选择复选框

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

我正在使用引导multiselect

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

型号：

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>   

查看：

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>   

@Html.LabelFor（model=>model.SelectedGroupIds，新的{@class=“控制标签col-md-2”}）
@Html.DropDownListFor（model=>model.SelectedGroupIds，
Model.GroupSelectList，
新的{@class=“multiselect”，multiple=“multiple”}）
@Html.ValidationMessageFor（model=>model.SelectedGroupId）
$（文档）.ready（函数（）{
$（'#SelectedGroupIds'）.multiselect（）；
});

谁能告诉我我错过了什么

---

谢谢大家!

Html.DropDownListFor

呈现单个选择。尝试

Html.ListBoxFor

。

我的坏：-（有两个问题-

第一：
看看我用来绑定到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的所有项目 这就是dropdownlistclick没有得到正确处理的问题

秒：
缺少一些jQuery和引导库-以下是所需库的完整列表：

    <!-- 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.

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

Bootstrap select以单个逗号分隔字符串的形式返回所有选定值。使用JavaScript或jQuery on change方法选择此字符串并将其作为值分配给隐藏字段。现在，此隐藏字段值设置为selected long string。提交表单时，隐藏字段的值也将提交给目标控制器。您可以使用拆分方法来分离这些值，并根据需要使用

---

记住，这只是一个技巧，不是正确的方法。

您必须使用以下方法：

---

@Html.DropDownList（“表单”，ViewBag.Forms作为SelectList，新建{@class=“表单控制”，placeholder=“Select”，multiple=“multiple”}）

但我希望列表作为下拉列表。这根本不可能。下拉列表只支持单个选择。如果需要选择多个，它将呈现为一个列表框。也许你可以找到一个JavaScript库，它可以伪装成下拉列表，但仅凭HTML是不可能的。