2016-11-21 131 views
0

我有兩個Select2多輸入彼此相鄰。一個從數組中立即獲得它的選項,而另一個應該從沒有可用的選項開始。鏡像選擇2選項不改變選擇

當用戶從第一個選項中選擇一些選項時,我希望它們可以在第二個選項中選擇,當從第一個中刪除時,它也應該從第二個中刪除,如果在第二個中選擇也理想地刪除。

到目前爲止,我已經設法從第一個選擇的選項到第二個,但他們的方式,我目前正在這樣做意味着它在第二個自動「選擇」,這是不是我想要的。我只是希望他們作爲選擇。

$('.secondSelect').select2({ //Start the second select working but blank 
    width: '100%' 
}); 

$('.firstSelect').select2({ //Start the first select with data 
    width: '100%', 
    data: initialData     
}).on("change", function() { //On a change to the first get the data and re-populate the second select 
    var obj = $(".firstSelect").select2("data"); 
    $(".secondSelect").select2({ 
     width: '100%', 
     data: obj      
    });  
}); 

此外,我試圖消除(設置第二重新填充之前改變空)時,第一選擇2被更改的選項似乎徹底清除第二選擇2的選擇項。不好。

希望有人仍然可以理解這一切與所有的第一和秒的飛來飛去!謝謝。

+0

試試這個:在你的改變函數結尾添加類似$('。secondSelect選項')。prop('selected',false); – phobia82

回答

0

對,想通了,有點。

來自第一個select2的數組包含selected: true這就是爲什麼默認情況下它們被「選中」的原因。爲了解決這個問題,我只是通過數組運行並將其更改回false。刪除問題仍然存在,但並不算太壞。

 $('.secondSelect').select2({ 
      width: '100%' 
     }); 

     $('.firstSelect').select2({ 
      width: '100%', 
      data: initialData     
     }).on("change", function() { 

      var obj = $(".firstSelect").select2("data");      
     for (var i in obj) { 
     if (obj[i].selected == true) { 
      obj[i].selected = false; 
     } 
     }      
      $(".secondSelect option").remove(); 
      $(".secondSelect").select2({ 
       width: '100%', 
       data: obj      
      }); 

     }); 

我確定這是一個更好的方法來做到這一點,但它現在必須做。