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)