Question

I have a list with 40 results in a list box that can be multi-selected, but I want to limit the number of selections to be only a certain number, let’s say 5. In C# MVC, I have:

 @Html.ListBoxFor(model => model.Location, new SelectList(Model.AllLocations,     Model.Location), new { id = "AllLocations" })

What’s the best way to set this constraint on the control?

Answer 1

Javascript. Html provides no mechanism for that. Something like this:

$(document).ready(function() {

    // Add a click event for options in the list.
    $('#MyModel_Location option').click(function() {

        // Check if the parent has reached the limit of selected items.
        if ($(this).parent().val().length > 5) {
            // Removed the selected attribute from this option.
            $(this).removeAttr("selected");
        }
    });
});