如何从多个选择中删除重复值？

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>