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