multi-select dropdown boxes

those somewhat difficult to use, not-so-elegant html drop-down boxes. they perform adequately when using it as a single select drop-down box, but there are user issues when trying to select multiple items from a list. the requirement of ctrl or shift clicking, along with trying to scroll the list up and down, can often lead to a frustrating user experience; a mis-click will often require the visitor to start their selection process all over again. on a past project we had a section where we had incorporated several drop-down boxes, of which the user was able to (and very likely to) choose many of the options. the existing solution was kludgy at best.

javascript addresses the user's frustration by allowing the user to click on a selection one at a time, and with each click the chosen item is removed from the list of choices and added to a chosen list, which is easily visible. to remove an item previously chosen, you can simply click on it in the chosen list and it will be pushed back to the list of choices. this allows users to select items one at a time, while not losing any of their previously chosen items. this method also works extremely well when you have multiple drop-down lists; but there are limitations to this approach as well - see below.

see an actual demo in action at ozzis.us

one big problem with this approach is that it does not degrade to a standard select box if javascript is disabled. while this solution was built for a captive audience where we could safely ignore this and other issues, this approach as implemented would not be proper for a majority of sites. however, there are fixes for this, and my favorite would be to write this as a jquery plug-in where the data in the lists are drawn from actual select boxes.

another problem is that there is no way to make selections via keyboard, which is very important for web accessibility problems. this would be a tougher problem to solve using my approach; however, ryan cramer came up with a great solution to the problem, which is using a standard select box that incorporates a chosen list to hold items that have been clicked on by the user.

screenshot taken from ryancramer.com

javascript can be used to circumvent many of the issues associated with standard html form elements, but care must always be to remember the audience for which the site is intended. while good design is of great importance, so is accessibility.

thanks for reading. now go out and play! : )