Some more modifications to the handy "jqMultiSelects" plugin by rob.desbois (http://code.google.com/p/jqmultiselects/) An additional optional parameter to define the mode as one of 'move' (the default, old behavior), 'copy', or 'remove' Created to allow duplication in the destination select box. An additional function "moveSelect" to move options up and down in a select box. Pass two paramters: id of select box, and either 'up' or 'down'. This function handles multiple selects, moving the selected options up or down "in formation" Finally, the tiny 'reverse' function which is necessary for the 'move down' function - comment out if you already have it. It works for me; feedback welcome.
Eric //////// In use: $ ('#leftselectbox').multiSelect('rightselectbox','moverightbutton','','copy'); $ ('#rightselectbox').multiSelect('leftselectbox','moveleftbutton','','remove'); $('#moveupbutton').moveSelect('rightselectbox','up'); $('#movedownbutton').moveSelect('rightselectbox','down'); //////Code: jQuery.fn.multiSelect = function(to, button, thecallback, mode) { var mode = mode || 'move'; return this.each(function() { var id = this.id; jQuery(this).dblclick(function() { moveOptions(id, to, mode); }); if (typeof button != "undefined") jQuery("#"+button).click(function() { moveOptions(id, to, mode); }); }); function moveOptions(from, to, mode) { var dest = jQuery("#"+to)[0]; jQuery("#"+from+" option:selected").each(function() { switch(mode) { case 'move': //default jQuery(this).attr("selected", false).appendTo(dest); break; case 'copy': jQuery(this).attr("selected", false).clone().appendTo(dest); break; case 'remove': jQuery(this).remove(); } if (thecallback) thecallback(); }); } function callback(){ } }; //comment this function out if you've defined it elsewhere. jQuery.fn.reverse = function() { return this.pushStack(this.get().reverse(), arguments); }; //target should be a select list, mode should be one of 'up' or 'down' jQuery.fn.moveSelect = function(target, mode) { var mode = mode || 'down'; return this.each(function() { jQuery(this).click(function(){moveit(target, mode);}); }); function moveit(id, direction){ switch(direction) { case 'up': if(jQuery("#"+id)[0].selectedIndex != 0){ jQuery("#"+id+" > option:selected").each(function() {jQuery(this).prev().insertAfter(this);}); } break; case 'down': if(jQuery("#"+id)[0].options[jQuery("#"+id)[0].length-1].selected ! = true){ jQuery("#"+id+" > option:selected").reverse().each(function() {jQuery(this).next().insertBefore(this);}); } break; } } };