首页 > 解决方案 > MVC 下拉列表用于多项选择不起作用只是打开完整列表?

问题描述

public class RollClass
    {
        public int RoleID { get; set; }
        public string RoleName { get; set; }

        public List<RollClass> GetRoleList { get; set; }
    }

在控制器中,

 RollClass rc = new RollClass();
            rc.GetRoleList = db.Roles.Select(c => new RollClass {
                RoleID = c.RoleID,
                RoleName = c.RoleName
            }).ToList();
            ViewBag.Roles = rc.GetRoleList;

我的视图与用户模型绑定,所以我通过 viewbag 传递下拉值。

@Html.DropDownListFor(model => model.RoleID, ViewBag.Roles as SelectList,
            "Select Role", new { @class = "form-control", multiple =true })

使用 multiple=true 后,它显示下拉菜单打开意味着它显示所有三个下拉值并且多选不起作用。

我正在使用 MVC 5 和引导程序 4.0

任何建议将不胜感激

标签: c#asp.net-mvcmodel-view-controllerbootstrap-4razor-pages

解决方案


使用选择2

看到这些链接:

https://select2.org/

和多下拉:

https://select2.org/selections

我使用如下:

 @Html.DropDownListFor(model => model.RoleID,ViewBag.Roles as SelectList, new { @class = 
   "select2_tagged form-control", placeholder = "select ..." })


<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Select2/js/select2.js"></script>
  <script>
     $("#RoleID").on("select2:select", function (evt) {
            var element = evt.params.data.element;
            var $element = $(element);
            $element.detach();
            $(this).append($element);
            $(this).trigger("change");
        });
  </script>

推荐阅读