This is a small jQuery plugin that helps you improve the user experience regarding the use of multiple cross selects.
It is very easy to install and can be easily customized because it has callbaks for many events, such as :
It also has a sort function that can be defined in order of your needs for each multiple select.
You can fully customize it via CSS, you can extend it and have as many multi selects as you want on the page.
Name | type | default | description |
---|---|---|---|
right | string jQuery selector |
multiselect_id _to |
The select where the options are moved to |
rightSelected | string jQuery selector |
multiselect_id _rightSelected |
The button that moves selected options from left to right |
rightAll | string jQuery selector |
multiselect_id _rightAll |
The button that moves all options from left to right |
leftSelected | string jQuery selector |
multiselect_id _leftSelected |
The button that moves selected options from right to left |
leftAll | string jQuery selector |
multiselect_id _leftAll |
The button that moves all options from right to left |
startUp | function or false |
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 or false |
sort options alphabetically |
Will sort options when an action happend into right or left elements. |
beforeMoveOneToRight | function |
return true |
Whatever you want to do with $left , $right and option 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
|
afterMoveOneToRight | function |
no action |
Whatever you want to do with $left , $right and option elements after they are moved to right.
|
beforeMoveAllToRight | function |
return true |
Whatever you want to do with $left , $right and option elements before they are moved to right with move all action.
Keep in mind that this function must return a boolean value.true will let the action to be performed.false will stop the action
|
afterMoveAllToRight | function |
no action |
Whatever you want to do with $left , $right and option elements after they are moved to right with move all action.
|
beforeMoveOneToLeft | function |
return true |
Whatever you want to do with $left , $right and option 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
|
afterMoveOneToLeft | function |
no action |
Whatever you want to do with $left , $right and option elements after they are moved to left.
|
beforeMoveAllToLeft | function |
return true |
Whatever you want to do with $left , $right and option elements before they are moved to left with move all action.
Keep in mind that this function must return a boolean value.true will let the action to be performed.false will stop the action
|
afterMoveAllToLeft | function |
no action |
Whatever you want to do with $left , $right and option elements after they are moved to left with move all action.
|
<div class="row-fluid"> <div class="span5"> <select name="from" id="multiselect" class="span12" 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="span2"> <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="icon-forward"></i></button> <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="icon-chevron-right"></i></button> <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="icon-chevron-left"></i></button> <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="icon-backward"></i></button> </div> <div class="span5"> <select name="to" id="multiselect_to" class="span12" size="8" multiple="multiple"></select> </div> </div>
<script type="text/javascript"> jQuery(document).ready(function($) { $('#multiselect').multiselect(); }); </script>
data
options<div class="row-fluid"> <div class="span5"> <select name="from" class="multiselect span12" size="8" multiple="multiple" data-right="#multiselect_to_1" data-right-all="#right_All_1" data-right-selected="#right_Selected_1" data-left-all="#left_All_1" data-right-selected="#left_Selected_1"> <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="span2"> <button type="button" id="right_All_1" class="btn btn-block"><i class="icon-forward"></i></button> <button type="button" id="right_Selected_1" class="btn btn-block"><i class="icon-chevron-right"></i></button> <button type="button" id="left_Selected_1" class="btn btn-block"><i class="icon-chevron-left"></i></button> <button type="button" id="left_All_1" class="btn btn-block"><i class="icon-backward"></i></button> </div> <div class="span5"> <select name="to" id="multiselect_to_1" class="span12" size="8" multiple="multiple"></select> </div> </div>
<script type="text/javascript"> jQuery(document).ready(function($) { $('.multiselect').multiselect(); }); </script>
javascript
options<div class="row-fluid"> <div class="span5"> <select name="from" class="js-multiselect span12" 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="span2"> <button type="button" id="js_right_All_1" class="btn btn-block"><i class="icon-forward"></i></button> <button type="button" id="js_right_Selected_1" class="btn btn-block"><i class="icon-chevron-right"></i></button> <button type="button" id="js_left_Selected_1" class="btn btn-block"><i class="icon-chevron-left"></i></button> <button type="button" id="js_left_All_1" class="btn btn-block"><i class="icon-backward"></i></button> </div> <div class="span5"> <select name="to" id="js_multiselect_to_1" class="span12" size="8" multiple="multiple"></select> </div> </div>
<script type="text/javascript"> jQuery(document).ready(function($) { $('.js-multiselect').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' }); }); </script>