[jQuery] Multiple Selects
I edited the Multiple Selects plugin, and thought the author could use
it for any future releases. All I did was made it so you're not
restricted to IDs for the selectors, and added a callback so you can
interact with the moved items.
All credit goes to Rob Desbois
/**
* Multiple Selects - jQuery plugin for converting a multiple <select>
into two, adding the ability to move items between the boxes.
* http://code.google.com/p/jqmultiselects/
*
* Copyright (c) 2007 Rob Desbois
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Version: 0.1
*/
/**
* Adds multiple select behaviour to a <select> element.
* This allows options to be transferred to a different select using
mouse double-clicks, or multiple options at a time via another
element.
*
* @example $('#my_select_left').multiSelect('#my_select_right');
* @desc Sets up double-clicks on #my_select_left's options to move the
option to #my_select_right
* @example $('#my_select_left').multiSelect('#my_select_right',
'#my_move_right_button');
* @desc Sets up double-clicks as above and also sets up
#my_move_right_button to transfer multiple elements on click.
* @example $('#my_select_left').multiSelect('#my_select_right',
'#my_move_right_button',function(){
* //callback here
* });
* @desc Allows for a callback to be executed once a transfer has been
made.
*
* @example
* <table>
* <tr>
* <td><select id="select_left" multiple="multiple" size="6">
* <option>Item 1</option>
* <option>Item 2</option>
* <option>Item 3</option>
* <option>Item 4</option>
* </select></td>
*
* <td>
* <a id="options_right" href="#">
* <img src="arrow_right.gif" alt=">" />
* </a>
*
* <a id="options_left" href="#">
* <img src="arrow_left.gif" alt="<" />
* </a>
* </td>
*
* <td><select id="select_right" multiple="multiple" size="6">
* <option>Item 5</option>
* <option>Item 6</option>
* <option>Item 7</option>
* <option>Item 8</option>
* </select></td>
* </tr>
* </table>
*
* <script type="text/javascript"><!--
* $(function() {
* $("#select_left").multiSelect($("#select_right"),$
("#options_right"),function(){ alert("I have an ajax call here, which
sends the right select elements to the server");});
* $("#select_right").multiSelect($("#select_left"),$
("#options_left"));
* });
* // --></script>
*/
jQuery.fn.multiSelect = function(to,button,thecallback) {
return this.each(function() {
var self = this;
jQuery(this).dblclick(function(){
moveOptions(self,to);
});
if (typeof button!="undefined")
jQuery(button).click(function(){
moveOptions(self,to);
});
});
function moveOptions(from,to) {
var dest = jQuery(to)[0];
jQuery("option:selected",from).each(function() {
jQuery(this)
.attr("selected",false)
.appendTo(dest);
if (thecallback)
thecallback();
});
}
function callback() {
}
};