This is  the jQuery Mega Select List project,

Usage

The jQuery Mega Select List is for when you have a drop down list with a crazy number of items that can be logically grouped, for example if you had a list of Cities In The UK, which could be organised by County. The plugin converts the drop down into a multi-column mega-menu that you can style with CSS (and show/hide too). The selected value is posted as part of the form submission exactly as if it was the original select list.

To use this plugin you will need:

1. jquery.js
2. jquery.megaselectlist.js

Reference these scripts on your web page and then use the following script to convert your select list into a mega select list!

$("select").megaselectlist();

By default, the plugin will get the headers from optgroup option groups (in the Cities organised by County example, this would be the County) and if no optgroups exist, from the "rel" attribute of each option element. You can change this by telling the plugin to use a different attribute, like this.

$("select").megaselectlist("headers": "alt");

There should be an associated label element for your select list, the text from this label will be added to the mega list.

To animate the list, so it expands on demand, use the following (you can set the animation to trigger on mouse over or on click).

$("select").megaselectlist({ "animate": "true", "animateevent", "click" });

CSS

You can style the mega list as you wish, the example in the demo uses a three column layout. You can also style the current selected item, to show the user their current selection.