如何從多個選擇中刪除重複值？

Question

我已經採取這是我從一個選擇選擇應該是出現在第二選擇其中重複不允許多個選擇，這些值..

<select name="campaignName" size=""multiple> 
    <c:forEach items="${campaignDetails}" var="campaignDetails"> 
     <option value="${campaignDetails.campaignId}">${campaignDetails.campaignName}</option> 
    </c:forEach> 
</select>  
<select property="selectedCampaigns" id="selectedCampaigns" name = "selectedCampaigns" size="13" styleClass="regioncombo" style="width:200px;" multiple="true" > 
</select> 

腳本從一個選擇到另一個選擇添加...瓦萊斯

$(document).ready(function() { 
    $(document).on('click', '#manDiv', function() { 
     $("#submitSync").show(); 
    }); 

}); 

$(document).ready(function() { 
    $("#addCampaign").click(function() { 
     $("#select-campaigns option:selected").each(function() { 
     var $this = $(this); 
     if ($this.length) { 
      var selectedCampaigns = document.getElementById("selectedCampaigns"); 
//   console.log(selectedCampaigns); 
      for (var j = 0; j < $this.length; j++) { 
       var option = document.createElement('option'); 
//    console.log((option[0]).attr('value')); 
       option.text = $this.text(); 
       option.value = $this.val(); 
       selectedCampaigns.add(option, j + 1); 
      } 
     } 
     }); 
    }); 
}); 

上面的代碼允許重複的值，但我想知道如何限制添加重複值。即一旦我們選擇並添加一個值，則不應該再次接受相同的值。

Answer 1

這是一個工作示例。

腳本只比較選項的文本內容。

元素'select'的Id-s被改變以使腳本工作。

腳本比較每個選項的第二與每個選擇的第一選擇選項選擇並追加選擇的選項如果它沒有重複。

$(document).ready(function() { 
 
    $(document).on('click', '#manDiv', function() { 
 
     $("#submitSync").show(); 
 
    }); 
 
    
 
    $("#addCampaign").click(function() { 
 
     $("#campaigns option:selected").each(function() { 
 
     var $this = $(this); 
 
     if ($this.length) { 
 
      var selectedCampaigns = document.getElementById("selectedCampaigns"); 
 
      for (var j = 0; j < $this.length; j++) { 
 
       var duplicate = false; 
 
       for (var i=0; i < selectedCampaigns.length; i++) { 
 
        if ($this.text() == $("#selectedCampaigns option").eq(i).text()) 
 
        duplicate = true; 
 
       } 
 
       if (!duplicate) { 
 
       var option = document.createElement('option'); 
 
       option.text = $this.text(); 
 
       option.value = $this.val(); 
 
       selectedCampaigns.add(option, j + 1); 
 
       } 
 
      } 
 
     } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="campaignName" size="10" multiple="true" id="campaigns"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
    <option value="6">6</option> 
 
    <option value="7">7</option> 
 
    <option value="8">8</option> 
 
</select> 
 
<select property="selectedCampaigns" id="selectedCampaigns" name="selectedCampaigns" size="13" styleclass="regioncombo" style="width:200px;" multiple="true"> 
 
</select> 
 
<button id="addCampaign">addCampaign</button>