.NET Core 2.1中如何为现有多选下拉框添加复选框？

Great question! I’ve run into this exact scenario before—native <select multiple> doesn’t support checkboxes out of the box, but we can adapt your existing ASP.NET Core 2.1 setup to meet the user’s request without rewriting your backend code. Here are two solid approaches:

1. Custom Checkbox List (No Third-Party Libraries) #

This method keeps your existing form submission logic intact by hiding the native <select> and syncing a custom checkbox list with it. Perfect if you want to avoid adding dependencies.

Update Your View #

Replace your existing <select> with this code (we’ll keep the native select hidden for form submission, then render a visible checkbox list):

<!-- Hidden native select: maintains compatibility with your existing backend -->
<select class="d-none" asp-for="SelectedItems" asp-items="Model.ItemDropdownOptions" multiple></select>

<!-- Custom checkbox list styled to match your form control -->
<div class="form-control" style="height: auto; max-height: 400px; overflow-y: auto;">
    <ul class="list-unstyled mb-0">
        @foreach (var item in Model.ItemDropdownOptions)
        {
            <li class="p-2 border-bottom">
                <div class="form-check">
                    <input 
                        type="checkbox" 
                        class="form-check-input item-checkbox" 
                        value="@item.Value" 
                        id="item-@item.Value"
                        @(item.Selected ? "checked" : "")>
                    <label class="form-check-label" for="item-@item.Value">
                        @item.Text
                    </label>
                </div>
            </li>
        }
    </ul>
</div>

Add Syncing JavaScript #

Add this script to your view to keep the hidden select and checkboxes in sync (so form submissions work exactly like before):

<script>
    // Get references to elements
    const checkboxes = document.querySelectorAll('.item-checkbox');
    const hiddenSelect = document.querySelector('select[name="SelectedItems"]');

    // Sync checkboxes to select on page load (redundant with view logic, but safe)
    checkboxes.forEach(checkbox => {
        const matchingOption = hiddenSelect.querySelector(`option[value="${checkbox.value}"]`);
        if (matchingOption) checkbox.checked = matchingOption.selected;
    });

    // Sync select when checkboxes are toggled
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', () => {
            const matchingOption = hiddenSelect.querySelector(`option[value="${checkbox.value}"]`);
            if (matchingOption) matchingOption.selected = checkbox.checked;
        });
    });
</script>

Your backend code (both view model and post action) stays 100% unchanged—the form still submits the SelectedItems array just like it did before.

2. Use a Third-Party Library (Faster Setup) #

If you don’t mind adding a lightweight library, tools like Bootstrap Multiselect turn native <select multiple> into a checkbox-enabled dropdown with minimal code. It plays nicely with ASP.NET Core’s tag helpers.

Step 1: Add Library Assets #

Include Bootstrap (if you aren’t already using it) and Bootstrap Multiselect’s CSS/JS in your layout or view.

Step 2: Initialize the Library #

Keep your original <select> tag and add this script:

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

<script>
    $(document).ready(function() {
        $('select[name="SelectedItems"]').multiselect({
            includeSelectAllOption: true, // Optional: add a "Select All" checkbox
            maxHeight: 400, // Match your original size
            buttonWidth: '100%' // Match form control width
        });
    });
</script>

This will automatically convert your select into a user-friendly dropdown with checkboxes, and it handles syncing values for form submission behind the scenes.

Key Notes #

• Neither approach requires changes to your AllocateDocumentViewModel or AllocateDocumentsPostModel—your backend logic remains identical.
• The first method gives you full control over styling, while the second is faster to implement.

内容的提问来源于stack exchange，提问作者Trevor Daniel