檢查是否在選擇元素組中多次選擇了相同的選項

Question

我有一個動態數量的select元素，並且當表單被提交時，我想檢查是否已經使用JQuery多次選擇了相同的選項。如果它然後顯示一個錯誤。有任何想法嗎？

<div class="container-seller-commission"> 
      <div class="row-seller-commission"> 
       <select name="seller" id="seller" class="select-seller valid"><option value=""></option><option value="4" selected="selected">Agent</option> 
    <option value="2">Crisalix Global</option> 
    <option value="1">Owner</option> 
    <option value="3">Support</option></select> 
       </div> 

      </div> 
     <div class="row-seller-commission"> 
      <select name="seller" id="seller" class="select-seller valid"><option value=""></option><option value="4" disabled="disabled">Agent</option> 
    <option value="2" selected="selected">Crisalix Global</option> 
    <option value="1">Owner</option> 
    <option value="3">Support</option></select> 
      </div> 
    <div class="row-seller-commission"> 

       <select name="seller" id="seller" class="select-seller valid"><option value=""></option><option value="4" disabled="disabled">Agent</option> 
    <option value="2">Crisalix Global</option> 
    <option value="1" selected="selected">Owner</option> 
    <option value="3" disabled="disabled">Support</option></select> 

      </div></div> 

Answer 1

這是非常簡單的，讓所有選擇的值到一個數組，確定如果陣列中的所有項目都是獨一無二的

$('button').on('click', function(){ 
 
    var items = $('.select-seller').map(function(){ 
 
     return $(this).val(); 
 
    }).get(); 
 
    
 
    console.log(isUnique(items)); 
 
}); 
 

 
function isUnique(arr){ 
 
    var uniqueValues = arr.reduce(function(p,c){ 
 
    if(p.indexOf(c) < 0) p.push(c); 
 
    return p; 
 
    },[]); 
 
    
 
    return uniqueValues.length == arr.length; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-seller-commission"> 
 
      <div class="row-seller-commission"> 
 
       <select name="seller" id="seller" class="select-seller valid"><option value=""></option><option value="4" selected="selected">Agent</option> 
 
    <option value="2">Crisalix Global</option> 
 
    <option value="1">Owner</option> 
 
    <option value="3">Support</option></select> 
 
       </div> 
 

 
      </div> 
 
     <div class="row-seller-commission"> 
 
      <select name="seller" id="seller" class="select-seller valid"><option value=""></option><option value="4" disabled="disabled">Agent</option> 
 
    <option value="2" selected="selected">Crisalix Global</option> 
 
    <option value="1">Owner</option> 
 
    <option value="3">Support</option></select> 
 
      </div> 
 
    <div class="row-seller-commission"> 
 

 
       <select name="seller" id="seller" class="select-seller valid"><option value=""></option><option value="4" disabled="disabled">Agent</option> 
 
    <option value="2">Crisalix Global</option> 
 
    <option value="1" selected="selected">Owner</option> 
 
    <option value="3" disabled="disabled">Support</option></select> 
 

 
      </div></div> 
 

 
<button>test</button>

一定要確保你給你的HTML元素唯一的ID！