check if same option has been selected more than once in group of select elements

Question

I have a dynamic number of select elements, and when the form is submitted I want to check if the same option has been selected more than once with JQuery. If it has then show an error. Any ideas?

<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

This is pretty straightforward, get the values of all selects into an array, determine if all the items in the array are unique

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

Do make sure you give your html elements unique id's!