Multiselect

HTML

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"muti-sel"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"col-xs-5"</code><code>&gt;</code>

<code>        </code><code>&lt;</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>&gt;</code>

<code>            </code><code>&lt;</code><code>option</code> <code>value</code><code>=</code><code>"1"</code><code>&gt;Item 1&lt;/</code><code>option</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>option</code> <code>value</code><code>=</code><code>"2"</code><code>&gt;Item 5&lt;/</code><code>option</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>option</code> <code>value</code><code>=</code><code>"2"</code><code>&gt;Item 2&lt;/</code><code>option</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>option</code> <code>value</code><code>=</code><code>"2"</code><code>&gt;Item 4&lt;/</code><code>option</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>option</code> <code>value</code><code>=</code><code>"3"</code><code>&gt;Item 3&lt;/</code><code>option</code><code>&gt;</code>

<code>        </code><code>&lt;/</code><code>select</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"col-xs-2"</code><code>&gt;</code>

<code>        </code><code>&lt;</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>&gt;&lt;</code><code>i</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-forward"</code><code>&gt;&lt;/</code><code>i</code><code>&gt;&lt;/</code><code>button</code><code>&gt;</code>

<code>        </code><code>&lt;</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>&gt;&lt;</code><code>i</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-chevron-right"</code><code>&gt;&lt;/</code><code>i</code><code>&gt;&lt;/</code><code>button</code><code>&gt;</code>

<code>        </code><code>&lt;</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>&gt;&lt;</code><code>i</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-chevron-left"</code><code>&gt;&lt;/</code><code>i</code><code>&gt;&lt;/</code><code>button</code><code>&gt;</code>

<code>        </code><code>&lt;</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>&gt;&lt;</code><code>i</code> <code>class</code><code>=</code><code>"glyphicon glyphicon-backward"</code><code>&gt;&lt;/</code><code>i</code><code>&gt;&lt;/</code><code>button</code><code>&gt;</code>

<code>        </code><code>&lt;</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>&gt;&lt;/</code><code>select</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</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，如需轉載請自行聯系原作者