2010-10-20 111 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>