插件描述：jquery.multi-select是一款jQuery开发的美化Select多选插件，界面上存在未选和已选两个框方便选择，支持分组。

HTML

elem 1

elem 2

elem 3

elem 4

...

elem 100

JavaScript$('#my-select').multiSelect()

OptionsafterInitfunctionfunction(container){}Function to call after the multiSelect initilization.

afterSelectfunctionfunction(values){}Function to call after one item is selected.

afterDeselectfunctionfunction(values){}Function to call after one item is deselected.

selectableHeaderHTML/TextnullText or HTML to display in the selectable header.

selectionHeaderHTML/TextnullText or HTML to display in the selection header.

selectableFooterHTML/TextnullText or HTML to display in the selectable footer.

selectionFooterHTML/TextnullText or HTML to display in the selection footer.

disabledClassString'disabled'CSS class for disabled items.

selectableOptgroupBooleanfalseClick on optgroup will select all nested options when set to true.

keepOrderBooleanfalseThe selected items will be displayed in the same order than they are selected.

dblClickBooleanfalseReplace the defautl click event to select items by the dblclick one.

cssClassString""Add a custom CSS class to the multiselect container.

Methods

.multiSelect(options)

Activates your content as a multiselect. Accepts an optional options object$('#your-select').multiSelect({});

Note: You must init the multiple select with $('#your-select').multiSelect() before calling one of the following methods.

.multiSelect('select', String|Array)

Select the item with the value given in parameter. The value can be either a string ('elem_1') matching the value of the option oran Array of values (['elem_1', 'elem_42']).$('#your-select').multiSelect('select', String|Array);

.multiSelect('deselect', String|Array)

Deselect the item with the value given in parameter. The value can be either a string ('elem_1') matching the value of the option oran Array of values (['elem_1', 'elem_42']).$('#your-select').multiSelect('deselect', String|Array);

.multiSelect('select_all')

Select all elements.$('#your-select').multiSelect('deselect_all');

.multiSelect('deselect_all')

Deselect all items previously selected.$('#your-select').multiSelect('select_all');

.multiSelect('refresh')

Refresh current multiselect.$('#your-select').multiSelect('refresh');

.multiSelect('addOption', Hash)

Dynamically add option to the multiselect.

The options hash is described bellow:valueStringtrueThe value of the option to create

textStringtrueThe text of the option to create

indexNumberfalseThe index where to insert the option. If none given, it will be inserted as last option.

nestedStringfalseIf there are optgroups you can choose under which optgroup you want to insert the option.$('#your-select').multiSelect('addOption', { value: 'test', text: 'test', index: 0, nested: 'optgroup_label' });

Keyboard[  ↓  ]  Down arrowSelect next item in the focused list

[  ↑  ]  Up arrowSelect previous item in the focused list

[ — ]  SpaceAdd/remove item depending on which list is currently focused

[ ← ]  Left arrowFocus the previous list

[ → ]  Right arrowFocus the next list

Demos

Pre-selected options

elem 1

elem 2

elem 3

elem 4

...

elem 100

$('#pre-selected-options').multiSelect();

Callbacks

elem 1

elem 2

elem 3

elem 4

...

elem 100

$('#callbacks').multiSelect({

afterSelect: function(values){

alert("Select value: "+values);

},

afterDeselect: function(values){

alert("Deselect value: "+values);

}

});

Optgroup

Yoda

Obiwan

Palpatine

Darth Vader

$('#optgroup').multiSelect({ selectableOptgroup: true });