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

Jquery Mega Select ListQuick 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."
});

You Are Here: Home » Jquery Plugins » Mega Select List