检查是否在选择元素组中多次选择了相同的选项

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！