Skip to Navigation or Skip to Content

Steve Fenton
Author of The Reason Your Website Sucks

Jquery Mega Select List

You Are Here: Home » JavaScript » Mega Select List

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.

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

  1. /* Recommended styles */
  2.  
  3. .megaselectlistcolumn {
  4. width: 31%;
  5. margin: 0 1%;
  6. float: left;
  7. }
  8.  
  9. .megaselectlist .currentitem {
  10. padding: 0;
  11. border: 0.1em dotted Green;
  12. color: Black;
  13. }
  14.  
  15. /* Optional styles */
  16.  
  17. .megaselectlist {
  18. background-color: #F5F5F5;
  19. border: 1px solid Silver;
  20. }
  21.  
  22. .megaselectlistcolumn > h2 {
  23. font-size: 1em;
  24. background-color: #ECECEC;
  25. text-align: center;
  26. padding: 2px 0;
  27. margin: 0;
  28. }
  29.  
  30. .megaselectlist > p {
  31. margin: 0.2em;
  32. }
  33.  
  34. .megaselectlistcolumn > ul {
  35. padding-left: 1em;
  36. margin: 0;
  37. color: Gray;
  38. }
  39.  
  40. .megaselectlistcolumn > ul > li {
  41. cursor: pointer;
  42. padding: 0.1em;
  43. font-size: small;
  44. }
  45.  
  46. .megaselectlistcolumn > ul > li:hover {
  47. background-color: #ECECEC;
  48. color: Black;
  49. }

JavaScript

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

With all options set:

  1. $("#example").megaselectlist({
  2. classmodifier: "megaselectlist",
  3. headers: "rel",
  4. animate: true,
  5. animateevent: "click",
  6. multiple: true,
  7. maximumitems: 4,
  8. warningmessage: "Only {0} options allowed."
  9. });