E Miller _ Note : jQuery Simple Multi-Select

Unless otherwise noted, all work licensed under :

jQuery Simple Multi-Select

Sep 10 2009, 9:37PM

[EDITED] v 1.0 Oct 10 2009

This plugin replaces a standard multi-select with a simplified version that doesn't require ctrl+click to select multiple options. Each click simply toggles the given option on or off. The original multi-select is hidden, and a replacement is built. The original multi-select is updated on each click so that when when your form is submitted, you get what you expected.

This plugin was inspired this blog post by Matt Gibbs - I just packaged it up into a plugin you can drop on your form.

This open source project is supported by Energy Solutions.

Requirements

jQuery 1.3+

.. and that's it. No other plugins, or CSS changes. If you would like full control over the CSS, that's possible as well, see below.

Usage

    
$('select').simpleMultiSelect();

All/none functions are also included:

    
$('select').smsNone();
$('select').smsAll();

Options

Default options shown below, override as needed ...

    
$('select').simpleMultiSelect({
    highlight : '#CCE',
    border : '#777',
    width : 350,
    height : 150,
    classesOnly : false,
    container : 'sms-container',
    pseudoSelect : 'sms-pseudo-select',
    selected : 'sms-selected',
    unselected : 'sms-unselected'
});

Example 1 : default functionality

Example 2 : classesOnly override

By default, simpleMultiSelect uses inline styles. If you'd like full control over the styles, you can use the classesOnly option. The plugin will then only add class names, and toggle them for selected items. You'll need to provide your own CSS styles, for example:

    
div.custom-select-box{
    background-color:#CCC;
    padding:5px;
    width:400px;
    cursor:default;
    font-family: "arial", sans-serif;
    font-size:0.8em;
}
div.custom-select-box div.custom-unselect{
    background-color:#EEE;
    padding:3px;
}
div.custom-select-box div.custom-select{
    background-color:#FFF;
    padding:3px;
    font-weight:bold;
}

And then override a few simpleMultiSelect options:

    
$('select').simpleMultiSelect({
    classesOnly : true, 
    pseudoSelect : 'custom-select-box', 
    selected : 'custom-select',
    unselected : 'custom-unselect'});
});

Download

jQuery Plugins or clone it via GitHub

TODO

Add support for disabled items
Add support for optgroup

Tags : code form jquery simplemultiselect

Ethan Miller