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>

但是该复选框是“伪”复选框，否则您可以添加诸如here之类的真实复选框控件，或者可以使用诸如Bootstrap Multiselect之类的某些插件。

SelectListItem的复选框

1 个答案: