E Miller _ Note : jQuery Simple Multi-Select

Unless otherwise noted, all work licensed under :

jQuery Simple Multi-Select

Sep 10 2009, 9:37PM

v 1.1.2 Jun 06 2012

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.

Initial development of this open source project was 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 : undefined,
    height : undefined,
    classesOnly : false,
    container : 'sms-container',
    pseudoSelect : 'sms-pseudo-select',
    selected : 'sms-selected',
    unselected : 'sms-unselected',
    disabled : 'sms-disabled',
    optgroup : 'sms-optgroup',
    optgroupLabel : 'sms-optgroup-label'
});

Example 1 : default functionality

The width, height, and font attributes will be copied over from the existing <select> element (thanks Antti Kaihola)

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;
}
div.custom-select-box div.custom-disabled{
    color:#844;
}
div.custom-select-box div.custom-optgroup{
    padding:5px;
}
div.custom-select-box div.custom-optgroup-label{
    background-color:#EE9;
    padding:5px;
    font-weight:bold;
}

And then override a few simpleMultiSelect options:

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

Download

Github download or clone it

Changelog

1.1.2 (2012-06-06)

* Updates for compatibility with jQuery 1.7 : Uses is(':selected') instead of attr('selected'). Remains compatible with 1.3

1.1.1 (2010-03-23)

* Respect the dimensions and font family/size of the replaced <select> element

1.1 (2010-03-23)

* Added support for optgroup, and disabled options

1.0 (2009-10-10)

* Added classOnly behavior

0.9 (2009-09-10)

* Initial commit

Tags : code form jquery simplemultiselect

Ethan Miller