Multi Column Dropdown Box with jQuery and CSS3 - Multi Column Select

File Size: 8.46 KB
Views Total: 19883
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Multi Column Dropdown Box with jQuery and CSS3 - Multi Column Select

A small and simple jQuery plugin that turns the standard select list into a multi-column dropdown box with CSS3 transitions and transforms.

How to use it:

1. Add the required Multi-Column-Select.css to the head section of your web page.

Multi-Column-Select.<link rel="stylesheet" href="Multi-Column-Select/Multi-Column-Select.css">

2. Add the jQuery javascript library and the jQuery Multi Column Select plugin to the footer of your web page.

<script src="//"></script> 
<script src="Multi-Column-Select/Multi-Column-Select.js"></script> 

3. Wrap the standard select list into a container element.

<div class="demo">
    <option value="Audi">Audi</option>
    <option value="Bugatti">Bugatti</option>
    <option value="Chrysler">Chrysler</option>

5. Call the plugin with options on the container element you created.


  // Single or Multiple Select
  multiple: false, 

  // Use text from option. Use false if you plan to use images
  useOptionText: true, 

  // Hide Original Select Control
  hideselect: true, 

  // Toggle Open Button Class
  openmenuClass: 'mcs-open', 

  // Text for button
  openmenuText: 'Choose An Option', 

  // Class added to Toggle button on open
  openclass: 'open', 

  // Class of parent container
  containerClass: 'mcs-container', 

  // Class of menu items
  itemClass: 'mcs-item', 

  // Assign as ID to items eg 'item-' = #item-1, #item-2, #item-3...
  idprefix: null, 

  // Toggle Height duration
  duration: 200, 

  // Callbacks
  onOpen: null,
  onClose: null,
  onItemSelect: null

Change log:


  • Fixed minor bugs.


  • Added 'Selected' option.



  • Update

This awesome jQuery plugin is developed by djsmithme. For more Advanced Usages, please check the demo page or visit the official website.