SelectListItem复选框

Question

.Net Core 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来实现呢？

任何帮助都将不胜感激。

Answer 1

您可以使用纯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>

但是这个复选框是一个“假的”复选框，否则您可以添加真正的复选框控件，如这里，或者您可以使用一些插件，如引导多重选择。