Как удалить повторяющиеся значения из нескольких элементов?

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> 

Скрипт для добавления выбранных VALES из одного выбора к другому ...

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

Вот рабочий пример.

Сценарий сравнивает только текстовое содержимое опций.

Идентификаторы элементов «выберите», где изменены, чтобы заставить скрипт работать.

Скрипт сравнивает каждая варианту из второго выбора с каждый выбран вариантом из первого выбора и добавляет выбранный вариант, если он не имеет дубликатов.

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