Steve Fenton
Author of The Reason Your Website Sucks

Quick Links

Visit the jQuery Mega Select List project hub, which has a demonstration and download for this plugin on JS Plugins JavaScript Plugin Library.

Description

The jQuery Mega Select List project is a plugin for the jQuery JavaScript Framework, which converts a long select-list into a mega-menu style display, which makes it easier to find and select the right option. The Mega Select List can either allow a single selection, or multiple selections and when in multiple mode, you can set a cap on the number of items that can be selected.

Requirements

• jquery.js
• jquery.megaselectlist.js

CSS

/* Recommended styles */
 
		.megaselectlistcolumn {
			width: 31%;
			margin: 0 1%;
			float: left;
		}
 
		.megaselectlist .currentitem {
			padding: 0;
			border: 0.1em dotted Green;
			color: Black;
		}
 
		/* Optional styles */
 
		.megaselectlist {
			background-color: #F5F5F5;
			border: 1px solid Silver;
		}
 
		.megaselectlistcolumn > h2 {
			font-size: 1em;
			background-color: #ECECEC;
			text-align: center;
			padding: 2px 0;
			margin: 0;
		}
 
		.megaselectlist > p {
			margin: 0.2em;
		}
 
		.megaselectlistcolumn > ul {
			padding-left: 1em;
			margin: 0;
			color: Gray;
		}
 
		.megaselectlistcolumn > ul > li {
			cursor: pointer;
			padding: 0.1em;
			font-size: small;
		}
 
		.megaselectlistcolumn > ul > li:hover {
			background-color: #ECECEC;
			color: Black;
		}

JavaScript

$("#example").megaselectlist();

With all options set:

$("#example").megaselectlist({
    classmodifier: "megaselectlist",
    headers: "rel",
    animate: true,
    animateevent: "click",
    multiple: true,
    maximumitems: 4,
    warningmessage: "Only {0} options allowed."
});