How many times we need to choose more than one item from a select tag? By default, it is possible to do that pressing the <ctrl> button. Holding down the ctrl button to select more values is considered not intuitive from many sources, so my goal was to allow multi selection avoiding the ctrl button. The usual approach consists in using an ul tag instead of the pure select one but it is not the approach described here; instead, i tried to develop, on the standard select’s selection, a new one that has the desired behaviour. The full screen demo here Code behind the demo here GitHub page for sources here

How to use it

It is a jQuery plugin; just download it, include it in your page and call it in this way:

$(yourSelector).MultiSelect({ css_class_selected: yourClass })

where css_class_selected is the CSS class applied to the selected options. The other available options are:
size                                :  {int} number of options displayed (10 by default)
keepPrevSelection     :  {boolean} when true, the selected options are still selected after the
Multiselect applying (true by default)
enableCategoriesSel :  {boolean} when true, the select gets a “cross-browser
multiselector by category as footer (check it on the demo) [false by default]
allowSubmit               :  {boolean} when true, the multiselect, on a form, is submitted as
expected (false by default)

Advantages

• Completely cross-browser
• Cross-browser multiselector by category included!
• No changes / addition to your HTML / CSS
• Standard select behaviour on mobile
• Correctly submitted, when the select is on a form (by setting the allowSubmit flag as true)

Disadvantages

• The :selected selector doesn’t work (follow explanation) !
• The multiselector by category feature doesn’t work on mobile yet

Known bads

Something like that:

$("select option:selected")

will return an empty array. The selected options are only styled as selected but the selected attribute is not involved in that. You can do this:

$("select option.mySelectedClass");

Where mySelectedClass is the CSS class you have passed to the plugin as value of the css_class_selected option .

Why “Get Value!” buttons work when the selected selector doesn’t?

It thanks to a jQuery val method override! It is something like this:

$.valHooks['select'].get = function(el){
// ...
}

What is the ideal situation to use this plugin?

The ideal situation is when you need a multiple selection select, you don’t want to add / change any HTML on your pages and you are happy without the “:selected” selector.

Foot notes

Can i have a technical explanation about how the plugin works?
To have the plugin crossbrowser, the only way to get the selected options is the event onchange; that is because ie6 has a lots of limitations with other kinds of interaction on the select tag.
So the plugin is based on the onchange event but there is a problem: when you click on an option (so you get it selected) and then you click on it again, the onchange is not triggered (bacause the option is already selected!).
The only way to make the onchange always work i found is… keep all the options not selected every time, deselecting them at the onchange! Just add a CSS class to make the options appears “selected like” before deselect them and they will seem still selected. You can check this behaviour in _attachSelectionAtOnChange.

That’s it! Thanks for reading!
Huge thanx to Karol Kowalski ( Karol’s facebook and github) and Ewan Bain (Ewan’s facebook and github)