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 class="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 or class
CSS
.openmenubutton{ } .menucontainer{ overflow:hidden; display:none; } .menuitem{ } 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 hideclass : 'hidden', // hide Class openclass : 'open', // Open Class clearclass : 'clear', // Clear Class duration : 200 // Animation Duration //TODO onOpenMenu: function(){}; onCloseMenu: function(){}; on... $.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)
