LINK：http://demo.mycodes.net/daima/Multiselect/;
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<
div
class
=
"muti-sel"
>
<
div
class
=
"col-xs-5"
>
<
select
name
=
"from[]"
id
=
"keepRenderingSort"
class
=
"form-control"
size
=
"8"
multiple
=
"multiple"
>
<
option
value
=
"1"
>Item 1</
option
>
<
option
value
=
"2"
>Item 5</
option
>
<
option
value
=
"2"
>Item 2</
option
>
<
option
value
=
"2"
>Item 4</
option
>
<
option
value
=
"3"
>Item 3</
option
>
</
select
>
</
div
>
<
div
class
=
"col-xs-2"
>
<
button
type
=
"button"
id
=
"keepRenderingSort_rightAll"
class
=
"btn btn-block"
><
i
class
=
"glyphicon glyphicon-forward"
></
i
></
button
>
<
button
type
=
"button"
id
=
"keepRenderingSort_rightSelected"
class
=
"btn btn-block"
><
i
class
=
"glyphicon glyphicon-chevron-right"
></
i
></
button
>
<
button
type
=
"button"
id
=
"keepRenderingSort_leftSelected"
class
=
"btn btn-block"
><
i
class
=
"glyphicon glyphicon-chevron-left"
></
i
></
button
>
<
button
type
=
"button"
id
=
"keepRenderingSort_leftAll"
class
=
"btn btn-block"
><
i
class
=
"glyphicon glyphicon-backward"
></
i
></
button
>
</
div
>
<
div
class
=
"col-xs-5"
>
<
select
name
=
"to[]"
id
=
"keepRenderingSort_to"
class
=
"form-control"
size
=
"8"
multiple
=
"multiple"
></
select
>
</
div
>
</
div
>
|
js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$(
'#keepRenderingSort'
).multiselect({
keepRenderingSort:
true
,
afterMoveToRight:
function
($left, $right, option){
var
sel_val = option.val();
},
afterMoveToLeft:
function
($left, $right, option){
}
});
$(
'#keepRenderingSort'
).multiselect({
right:
'#js_multiselect_to_1'
,
rightAll:
'#js_right_All_1'
,
rightSelected:
'#js_right_Selected_1'
,
leftSelected:
'#js_left_Selected_1'
,
leftAll:
'#js_left_All_1'
});
|
参数
| Name | type | default | description |
|---|---|---|---|
| right | stringjQuery selector |
multiselect_id_to |
The select where the options are moved to |
| rightSelected | stringjQuery selector |
multiselect_id_rightSelected |
The button that moves selected options from left to right |
| rightAll | stringjQuery selector |
multiselect_id_rightAll |
The button that moves all options from left to right |
| leftSelected | stringjQuery selector |
multiselect_id_leftSelected |
The button that moves selected options from right to left |
| leftAll | stringjQuery selector |
multiselect_id_leftAll |
The button that moves all options from right to left |
| startUp | function orfalse |
remove from left all options that are present in right |
Whatever you want to do with $left and $right elements when the multiselect plugin is initialised |
| sort | function orfalse |
sort options alphabetically |
Will sort options when an action happend into right or left elements. |
| beforeMoveToRight | function |
return true | Whatever you want to do with $left, $right and option[s] elements before they are moved to right. Keep in mind that this function must return a boolean value.true will let the action to be performed.false will stop the action |
| afterMoveToRight | function |
no action | Whatever you want to do with $left, $right and option[s] elements after they are moved to right. |
| beforeMoveToLeft | function |
return true | Whatever you want to do with $left, $right and option[s] elements before they are moved to left. Keep in mind that this function must return a boolean value.true will let the action to be performed.false will stop the action |
| afterMoveToLeft | function |
no action | Whatever you want to do with $left, $right and option[s] elements after they are moved to left. |
| keepRenderingSort | boolean |
false |
When you want to keep options sorted as they was rendered, keepRenderingSort must be true.When keepRenderingSort is true, sort function will be ignored. |
本文转自 爱笑嘚蛋蛋 51CTO博客，原文链接：http://blog.51cto.com/dd118/1880614，如需转载请自行联系原作者
