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

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

这是一个工作示例。

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

“选择”元素的 Id-s 已更改以使脚本正常工作。

脚本将第二个选择的每个选项与第一个选择的每个选定选项进行比较，如果没有重复，则附加选定的选项。 p>

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