代码之家  ›  专栏  ›  技术社区  ›  Trevor Daniel

选择列表项的复选框

  •  0
  • Trevor Daniel  · 技术社区  · 6 年前

    .NET核心2.1

    我有一个工作多选下拉列表,使用:

    <select class="form-control" asp-for="SelectedItems" asp-items="Model.ItemDropdownOptions" multiple size="20"></select>
    

    页面接收到以下填充的视图模型:

    public class AllocateDocumentViewModel
    {
        [DisplayName("Document Id")]
        public Guid DocumentId { get; set; }
    
        [DisplayName("Document Name")]
        public string DocumentName { get; set; }
    
        [DisplayName("Document Description")]
        public string DocumentDescription { get; set; }
    
        [DisplayName("Items")]
        public List<SelectListItem> ItemDropdownOptions { get; set; }
    
        public Guid[] SelectedItems { get; set; }
    }
    

    我的控制器收到这个模型:

    public class AllocateDocumentsPostModel
    {
        public Guid DocumentId { get; set; }
        public Guid[] SelectedItems { get; set; }
    }
    

    我的控制器是这样的:

    [HttpPost]
    public async Task<ActionResult> AllocateDocument(AllocateDocumentsPostModel model)
    {
     ......
    }
    

    一切正常。它允许用户按住键并选择多个项目。它还用当前选定的项正确填充表单。

    但是,用户的反馈是他们希望在列表中的每个项目旁边都有一个复选框。

    我已经找到了一些关于如何处理无序列表的例子,但是有没有办法用现有的select来处理呢?

    任何帮助都将不胜感激。

    0 回复  |  直到 6 年前
        1
  •  0
  •   Nan Yu    6 年前

    您可以使用纯css实现:

    CSS:

    <style>
        .select-checkbox option::before {
            content: "\2610";
            width: 1.3em;
            text-align: center;
            display: inline-block;
        }
    
        .select-checkbox option:checked::before {
            content: "\2611";
        }
    </style>
    

    添加 select-checkbox 要在视图中选择的类名:

    <select class="form-control select-checkbox" asp-for="SelectedItems" asp-items="Model.ItemDropdownOptions" multiple size="20"></select>
    

    但该复选框是一个“假”复选框,否则您将添加真正的复选框控件,如 here 或者你可以使用一些插件,比如 Bootstrap Multiselect .