2010-10-20 110 views
0

我有3个多重选择。在第一个Select1(左)我加载一组模块。在第三个Select3(右)我加载另一组模块。用户可以从左侧选择并点击添加以从左侧移除项目并将其附加到选择2(中间)。用户可以对Right执行相同的操作,选择的项目会创建一个不同的添加项,其中选择项将被添加到中间并从右侧删除。jquery删除/追加项目从多个选择到多个选择

这一切工作正常。

我想让用户从中间多选中删除。我只想要一次删除。如果用户选择正确包含在左侧和右侧多项选择中的项目,我希望它们从中间被移除并附加到左侧和右侧,根据来自哪里的原因。 我有一个变量设置,以确定中间选择的模块最初来自哪里。

进出口/ ITEM从中间回到左/右多选的实际附加/移除的问题。我搜索并尝试了各种各样的东西,但它耗时太长。

以下脚本仅显示与左选择和中选选项的交互。我将使用任何解决方案作为中间,右侧关系的模型。

任何帮助,将不胜感激

<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> 

回答

1

答案像往常一样在年底真的很简单。

<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>