插件描述：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 });

總結

以上是生活随笔為你收集整理的html多选框 jquery,jQuery Select多选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。