Mega Select List Summary

The jQuery Mega Select List is a plugin that converts large select lists into a mega-menu style list of options.

This plugin doesn't affect your form, posting back the selected value as if the options were being selected in a normal select list.

You can animate the mega-select-list using CSS as per this example, or you can have it constantly expanded instead.

Keyboard Navigation

You can navigate to a mega select list using the tab key - just like any form element. You can use the enter key or the space bar to expand or collapse the mega select list if animation is switched on.

You can move through the items with the tab key and use either space or enter to select and de-select items. You can use page up to go to the start of the list and page down to skip to the end of the list.

On a single-select list, when you select an item, focus will return to the title.

When the list is in a collapsed state, tabbing past the title will skip all of the items automatically.

You can use the escape key to collapse an expanded list.

With JavaScript animation (click to change)

Example 1

With Multiple Selections, and maximum number of items (you can also make this unlimited) - also demonstrates pre-selected items

Example 2

Options

classmodifier
Used to apply class names to the elements created by the plugin. You only need to specify a class modifier if you have a name-clash.
headers
If you choose not to use optgroups, you can instead choose to add the headers to an attribute on the option element. Specify the attribute you have used here, for example "rel".
animate
Whether the select list should animate or be fixed. Set to true to trigger animations.
animateevent
Specify whether the list should expand on "click" or "mouseover".
multiple
Whether multiple selections are allowed (true/false).
maximumitems
For multiple lists, how many items are allowed (0 is unlimited).
warningmessage
The message to show when too many items are selected. Add {0} to show the number, for example "Only {0} items allowed".
itemseparator
The character to separate items in a multiple selection list, for example ", " or " ".
hideloading
If you are using animation, prevents the initial collapse from being animated (true/false).
isxhtml
Whether your document is XHTML or not (affects option output)