Mouse multi-select script

Navigation

Skip navigation.

Site search

Site navigation

Details and download

Select-multiple

SELECT inputs have supported the MULTIPLE attribute since their introduction, allowing multiple options to be selected at the same time. However, most browsers do not have very good handling of these inputs, and demand that users use a combination of both mouse and keyboard to select multiple items, pressing modifier keys on the keyboard to cause the clicks to select or de-select additional options. Some allow drag-selecting multiple items but this does not allow selection of non-sequential options. Basically, this input type is a mess. It's clunky, annoying, inaccessible, and the user doesn't even have any way of knowing that they can select multiple items.

The script attempts to improve the usability of these inputs, to make it easy to just click items to add or remove them from the selection, or drag-select multiple items to add them to the selection. This gives, for most people, a far more intuitive response. It also means that they can be used one-handed by mouse users, without needing to use a keyboard as well. They don't have to know how to use the obscure modifier keys. It removes the need for that stupid message used on every single page where these inputs are used; "press Ctrl to select multiple items".

In the majority of cases, this script is an improvement that a user would appreciate. Of course, there are a precious few browsers that recognise the problems with the normal handling of these inputs. Browsers such as NetFront, where clicking already toggles selected options, instead of replacing existing selections. Sensible. This script does its best to detect when a browser is behaving so well, and does not interfere. It also avoids breaking inputs if the user uses only the keyboard, or if the user is already using the modifier keys. The idea is for it to be completely unobtrusive, to do nothing if the user is already happy using the keyboard or keyboard+mouse approach, and only to help those users who use only their mouse, or are not aware of how to interact with SELECT-MULTIPLE inputs. Everybody wins, right?

Demo

Try using the following select input using only your mouse, to select multiple items, and de-select items. Try drag-selecting to see how that works. Try using the keyboard modifier keys (typically Ctrl and Shift) with the mouse to make sure that still works.

Known limitations

The script tries to alter browser UI behaviours, and will of course have limitations when the UI has more functionality than JavaScript can reasonably and reliably detect. It does not work well if the user uses a combination of the mouse, and another non-keyboard input, such as voice commands. It does not react well to the user clicking OPTGROUP labels when only one option is selected in Opera, or drag-selecting options and releasing on an OPTGROUP label in Firefox. Dragging the mouse from outside the input and releasing it over the only selected option will cause it to be de-selected in most browsers. IE and Safari show ghost highlights for a moment if the keyboard is used to select options. These limitations cannot be reasonably worked around, so don't bother complaining about them.

It does not work well with scripts that add or remove OPTIONS from SELECT inputs after the user has selected something in the input. It does not work well with other scripts that dynamically change the selected options. It does not work with scripts that monitor the onchange event (that event is practically useless with SELECT-MULTIPLE anyway, so this should not really make it any worse). It introduces a flicker which is partly intentional, and partly undesirable. It does not work well if keys are randomly pressed while the mouse button is already pressed down on the input. It does not work well with ... well, there's probably some other stuff I overlooked.

It is a DOM-based script that will work in most DOM capable browsers that also support DOM events. Hopefully well enough to be usable. No promises.

Applications

When and where should you use this script? The recommendation is quite simple; you shouldn't. This script was written to prove a point, and to prove it could be done. It was presented as a challenge, without realising just how awkward such a seemingly simple challenge would be. It highlights so many corner cases where it is just not possible to make things behave intuitively, despite the ridiculous number of corner cases it already manages to deal with. The handling of this input is quite simply a mess, given how many users prefer to use only a mouse.

If you think you need this script, or if you are thinking of using this script, stop. Don't use it. Don't use SELECT-MULTIPLE inputs. Use checkboxes. They can share the same name, and will be submitted to the server in the same way as a SELECT-MULTIPLE. However, to the user, they are far more intuitive and predictable. They work without script. They work without hacks. They work with all different types of input device. Checkboxes are better than this script.

This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.