Jquery Mega Select List

My jQuery plugins were created either as experiments or to fulfil some need that I had on a project. I made the plugins available for free on this website - and you can still get them all here now.

I no longer actively support the jQuery plugins for the following reasons...

Many of the features can now be achieved without JavaScript using new features of HTML and CSS
Some of the features probably shouldn't even have been used, they were just experiments!
Not everyone wants to use jQuery - I will create stand alone plugins for the popular stuff that don't enforce any particular framework

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.

Mega Select List Demonstration.

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

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."
});