What HTML element should I use for when a user must select multiple items out of a large list in ASP.NET MVC?

Question

I have a form for lawyers where they need to be able to select which states they are licensed in.

So, they need a clean way to be able to select a few states from all 50 states.

What I'm not sure is, how to handle this in HTML. Is there some possible way to have a drop down of checkboxes or something similar?

I'm using ASP.NET MVC. I'm also curious how the model binding will look on the return for something like this.

Thanks,

Simpatico

Answer 1

You cannot put checkboxes in a dropdown unfortunately, the closest you could get is something like

<select multiple="multiple">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

but I don't think that would be too useful for 50 states.

Answer 2

This jQuery plugin might help.
Binding should work like for regular select with multiple selected items allowed.

Answer 3

You can consider following the approach widely adopted in desktop applications.

Put two select windows together on the form - the one for all available options, the other one for the ones the user has selected. Also put two buttons, preferably between those two windows - "Add item" and "Remove item".

Now the user will have a good overview of the current selection. A little more work but very good from the usability and smooth user experience point of view.