Multi-Column-Select

Jquery CSS Multi Column Select Box

A Simple plugin that will hide the Select control and then display a multicolumn dropdown (css)

Uses the original form control so will work if JS is not enabled and the form can be processed as normal

demo

Installation

Load the CSS:
"MultiColumnSelect/MultiColumnSelect.css"

Include js plugin:
"MultiColumnSelect/MultiColumnSelect.js"

Set up your HTML

    <form action="test.php" method="GET">

    <div id="selectcontrol">
        <select name="car">
                <option value="Audi">Audi</option>
                <option value="Bugatti">Bugatti</option>
                <option value="Chrysler">Chrysler</option>
                <option value="Daihatsu">Daihatsu</option>
                <option value="Ford">Ford</option>
                <option value="GM">General Motors</option>
                <option value="Honda">Honda</option>
                <option value="Infiniti">Infiniti</option>
                <option value="Jeep">Jeep</option>
                <option value="Kia">Kia</option>
     </select>
    </div>
    
        <input type="submit" value="Submit" />
    
    </form>

Wrap the select control with a div and give that container an ID

CSS

This is the HTML that the plugin produces (classed/ID's can be changed in the options):

<div class="menucontainer">
	<a id="msc-1" data="Audi" class="menuitem active">Audi</a>
	<a id="msc-2" data="Bugatti" class="menuitem">Bugatti</a>
	<a id="msc-3" data="Chrysler" class="menuitem active">Chrysler</a>
	<a id="msc-4" data="Daihatsu" class="menuitem">Daihatsu</a>
	<a id="msc-5" data="Ford" class="menuitem">Ford</a>
	<a id="msc-6" data="GM" class="menuitem active">General Motors</a>
	<a id="msc-7" data="Honda" class="menuitem">Honda</a>
	<a id="msc-8" data="Infiniti" class="menuitem">Infiniti</a>
</div>

So feel free to style it however you like.

The only styles to worry about are :

.openmenubutton{
}

.menucontainer{
        overflow:hidden;            
        display:none;                    
}

.menuitem{
}

.hidden  // to hide the original select box

Call the plugin

$("#selectcontrol").MultiColumnSelect({

            menuclass : 'multicolumnselect',     // class given to control
            openmenu : 'openmenubutton',         // used to toggle menu open/closed
            openmenutext : 'Choose...',   		 // Text for toggle menu button
            menucontainer : 'menucontainer',     // Container Class
            menuitem : 'menuitem',               // Item Class
            idprefix : 'msc-',                   //Id Prefix of items eg msc-1,msc-2....
	    showitemtext : true                  //Hide/Show text from options (if using images)
            openclass : 'open',                  // Open Class
            duration : 200,                       // Animation Duration
            multiple: false,
            duration : 200 
                
            onOpen : function(){};
            onClose : function(){};
            
            //TODO
            $.MulticolumnSelect.additem('ID','Value');
            $.MulticolumnSelect.additem({{'ID','Value'},{'ID','Value'},{'ID','Value'}});
            $.MulticolumnSelect.removeitem('ID');
            $.MulticolumnSelect.destroy();
            $.MulticolumnSelect.create({options});

});

Tested on

• IE7+
• Safari
• Firefox
• Chrome

License

The MIT License (MIT)