Jquery remove/append item from multiple select to multiple select

I have 3 multiple selects. In the first Select1(left) I load a group of modules. In the 3rd Select3(right) I load another group of modules. The user can select from the Left and hit an add to remove the item from the Left and append it to the Select2(Middle). The user can do the same with the Right, select items hit a different add where the selections will be appended to the middle and removed from the Right.

This all works fine.

I want to enable the user to remove from the Middle multi-select. I only want one occurence of the remove . If the user selects items that were formally contained in both the Left and Right multi-select I want them to be removed from the Middle and appended to the Left and Right according from where the orignially came from. I have a variable setup to determine where the module selected in the middle originally came from.

Im having problems with the actual append/removal of the ITEM from the middle back to the Left / Right multiple selects. Ive googled and tried various things but its开发者_JS百科 taking too long.

The following script shows only the interaction with the Left and Middle selects. I will use any solutions as a model for the Middle, Right relationship.

Any help would be greatly appreciated

<script src="js/jquery.js" type="text/javascript"></script>  
<script type="text/javascript">  
 $().ready(function() {  
  $('#add_mod').click(function() {  
   return !$('#select1_mod   option:selected').remove().appendTo('#select2_mod');
  });  
  $('#remove_mod').click(function() {  
   var x = "<%= str(modules) %>";  
   $("#select2_mod option:selected").each(function (i,selected) {  
    var thismod = $(this).text();  
    if (x.match(thismod))   
     // HELP Here I want to append this item (text and value) to Select1  
     // HELP Plus, remove this item from Select 2
                           //else after I get a solution for Left/Middle   
   });  
                    // HELP And then return Select1, Select2, Select3  
  });  
 });  
</script>  

the answer as usual was really simple in the end.

<script type="text/javascript">  
        $().ready(function() {  
        $('#add_mod').click(function() {  
            return !$('#select1_mod   option:selected').remove().appendTo('#select2_mod');  
        });  
        $('#remove_mod').click(function() {  
            var x = "<%= str(modules) %>";  
            var thisind = 0;  
            $("#select2_mod option:selected").each(function (index) {  
                var thismod = $(this).text();  
                var thisval = $(this).val();  
                if (x.match(thismod)) {  
                    $(this).remove().appendTo('#select1_mod');}  
                else {  
                    $(this).remove().appendTo('#select1_ms');}                      
            });  
        });  
        $('#add_ms').click(function() {  
            return !$('#select1_ms   option:selected').remove().appendTo('#select2_mod');  
        });  
        $('#remove_ms').click(function() {  
            return !$('#select2_ms   option:selected').remove().appendTo('#select1_ms');  
        });  

    });  
</script>