複数選択から重複値を削除するにはどうすればよいですか？

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

上記のコードでは重複値も許可されていますが、重複する値の追加を制限する方法を知りたいと思います。つまり、1つの値を選択して追加すると、2回目に同じ値を受け入れるべきではありません。

Answer 1

ここに実例があります。

スクリプトは、オプションのテキスト内容のみを比較します。

要素 'select'のId-sは、スクリプトを動作させるために変更された場所です。

スクリプト各オプション第と第1の選択の各々選択オプションを選択し、それは、重複がない場合、選択されたオプションを追加のを比較します。 `＃-campaigns`を選択

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