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


Ben Foster

About Me

I'm a software engineer and aspiring entrepreneur with 12+ years experience in the tech industry and have worked with startups and SMB’s in areas such as healthcare, recruitment and e-commerce (I even worked in enterprise, once). I founded my first startup Fabrik in 2011.

I now head up the engineering team at Checkout. If you're interested in working in an exciting and innovative fin-tech company, drop me a message.

Creative Commons Licence