Флажки для 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)
{
 ......
}

Это все работает просто отлично. Это позволяет пользователям удерживать нажатой клавишу и выбрать несколько элементов. Он также правильно заполняет форму выбранными элементами.

Но, по отзывам пользователей, они хотят поставить флажок рядом с каждым элементом в списке.

Я нашел несколько примеров того, как сделать это с неупорядоченными списками, но есть ли способ как-то сделать это с существующим выбором?

Любая помощь будет принята с благодарностью.

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>

Но этот флажок является «поддельным» флажком, в противном случае вы добавляете реальные элементы управления флажками, такие как здесь , или вы можете использовать некоторые плагины, такие как Bootstrap Multiselect .