April 24, 2012

Better multi select lists with jQuery

Multi select lists can be a pain for end users.

Issue 1 - how do you inform the user that they need to hold the Ctrl/Cmd key down to select multiple items?

Issue 2 - with large lists, how do we provide a visual cue of what the user has selected?

Solution 1

Use the excellent jQuery tipsy plugin to show a tooltip when they hover over your select list:

Multi select with tooltip

Solution 2

Display the selected items next to the select list.

Multi select showing selected items

Code

© 2022 Ben Foster