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

我进行了多次选择，我从一次选择中选择的值应该出现在不允许重复的第二次选择中。

<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);
            }
         }
      });
   });
});

上面的代码也允许重复值，但我想知道如何限制重复值的添加。即，一旦我们选择并添加了一个值，则第二次不应接受相同的值。

最佳答案

这是一个工作示例。

脚本仅比较选项的文本内容。

元素“选择”的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>