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="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="Multi-Column-Select/Multi-Column-Select.js"></script> 

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

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

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

$(document).ready(function(){
  $('.demo').MultiColumnSelect({

  // 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:

2016-04-10

• Fixed minor bugs.

2015-07-22

• Added 'Selected' option.

2015-03-13

• Update

2014-07-09

• Update

---

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