jQuery Toggle Options

This jQuery plugin allows the user to select or deselect options in a multiple select box without the need of the ctrl key. The options can be selected using the arrow keys and spacebar, holding shift + arrow keys or simply by a single mouse click.

There is a bug present in Internet Explorer where it makes de-selecting a previously selected option while holding the control key impossible. I understand this is a useability issue hence the reason I am releasing this plugin labelled as a beta release.

If anyone comes up with an idea of how to get around this issue please do let me know. About the bug; in Internet Explorer when you click on an option the browser doesn't trigger the event on the option element itself but only on the select element making it very difficult to track which option was actually clicked.

Also, while it does work in Internet Explorer 6, there is a major problem with the options jumping about which is caused when the options are being iterated through after selecting. Because Internet Explorer 6 doesn't support scrollTop for select boxes then this problem is a difficult one to address.

One idea I had was to only set a className and data variable but not actually set the selected attribute, and provide a method that sets the selected attribute to be manually called when needed. Again, if anyone has an ideas of how to deal with this then please post your suggestions in the comments below.

API

className : 'selected' ($.toggleOptions.defaults.className)

The className to apply to selected options for styling.

eventNameSpace : 'toggleOptions' ($.toggleOptions.defaults.eventNameSpace)

Namespace for bound events.

selectedDataName : 'selected' ($.toggleOptions.defaults.selectedDataName)

Data variable name to use for tracking which options are selected or not selected.

firstOptionDataName : 'firstOption' ($.toggleOptions.defaults.firstOptionDataName)

Data variable name to use for tracking the first option.

firstOptionResets : false ($.toggleOptions.defaults.firstOptionResets)

If true selecting the first option deselects all options.

firstOptionSelectable : true ($.toggleOptions.defaults.firstOptionSelectable)

If false the first option will not be selectable (good to use in combination with firstOptionResets.)

lastFocussedClassName : 'lastFocussed' ($.toggleOptions.defaults.lastFocussedClassName)

ClassName to apply to the last option that was focussed.

Examples

Multiple Select Box

$('#example-one').toggleOptions();

Select an Option One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty

Multiple Select Box with Optgroups

$('#example-two').toggleOptions();

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty

Multiple Select Box with First Option Resets

$('#example-three').toggleOptions
({
    firstOptionResets : true,
    firstOptionSelectable : false
});

Select an Option One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty