title: How to select unique values from multiple dropdown lists using JavaScript?
body: <p>I am building an online registration form. In the web form, there are six dropdown lists which is as follows :</p>
  
  <pre><code>    &lt;select name="hssub1" id="hssub1" onchange="checkUnique(this.id);"&gt;
          &lt;option value="1"&gt;Bengali&lt;/option&gt;
          &lt;option value="2"&gt;English&lt;/option&gt;
          &lt;option value="3"&gt;Hindi&lt;/option&gt;
          &lt;option value="4"&gt;Physics&lt;/option&gt;
          &lt;option value="5"&gt;Chemistry&lt;/option&gt;
          &lt;option value="6"&gt;Mathematics&lt;/option&gt;      
      &lt;/select&gt;
      &lt;select name="hssub2" id="hssub2" onchange="checkUnique(this.id);"&gt;
          &lt;option value="1"&gt;Bengali&lt;/option&gt;
          &lt;option value="2"&gt;English&lt;/option&gt;
          &lt;option value="3"&gt;Hindi&lt;/option&gt;
          &lt;option value="4"&gt;Physics&lt;/option&gt;
          &lt;option value="5"&gt;Chemistry&lt;/option&gt;
          &lt;option value="6"&gt;Mathematics&lt;/option&gt;  
      &lt;/select&gt;
      &lt;select name="hssub3" id="hssub3" onchange="checkUnique(this.id);"&gt;
          &lt;option value="1"&gt;Bengali&lt;/option&gt;
          &lt;option value="2"&gt;English&lt;/option&gt;
          &lt;option value="3"&gt;Hindi&lt;/option&gt;
          &lt;option value="4"&gt;Physics&lt;/option&gt;
          &lt;option value="5"&gt;Chemistry&lt;/option&gt;
          &lt;option value="6"&gt;Mathematics&lt;/option&gt;  
      &lt;/select&gt;
      &lt;select name="hssub4" id="hssub4" onchange="checkUnique(this.id);"&gt;
          &lt;option value="1"&gt;Bengali&lt;/option&gt;
          &lt;option value="2"&gt;English&lt;/option&gt;
          &lt;option value="3"&gt;Hindi&lt;/option&gt;
          &lt;option value="4"&gt;Physics&lt;/option&gt;
          &lt;option value="5"&gt;Chemistry&lt;/option&gt;
          &lt;option value="6"&gt;Mathematics&lt;/option&gt;  
      &lt;/select&gt;
      &lt;select name="hssub5" id="hssub5" onchange="checkUnique(this.id);"&gt;
          &lt;option value="1"&gt;Bengali&lt;/option&gt;
          &lt;option value="2"&gt;English&lt;/option&gt;
          &lt;option value="3"&gt;Hindi&lt;/option&gt;
          &lt;option value="4"&gt;Physics&lt;/option&gt;
          &lt;option value="5"&gt;Chemistry&lt;/option&gt;
          &lt;option value="6"&gt;Mathematics&lt;/option&gt;  
      &lt;/select&gt;
      &lt;select name="hssub6" id="hssub6" onchange="checkUnique(this.id);"&gt;
          &lt;option value="1"&gt;Bengali&lt;/option&gt;
          &lt;option value="2"&gt;English&lt;/option&gt;
          &lt;option value="3"&gt;Hindi&lt;/option&gt;
          &lt;option value="4"&gt;Physics&lt;/option&gt;
          &lt;option value="5"&gt;Chemistry&lt;/option&gt;
          &lt;option value="6"&gt;Mathematics&lt;/option&gt;  
      &lt;/select&gt;
  
      &lt;div id="notification"&gt;&lt;/div&gt;
  
      &lt;button type="button" name="submit" id="submit" onclick="return saveNext();"&gt;Save and Next&lt;/button&gt;
  </code></pre>
  
  <p>Now I want the users to be able to select options which are mutually exclusive, i.e., the selection set from the six lists should contain unique values. To ensure this I devised the following JavaScript code:</p>
  
  <pre><code>function checkUnique(elementID) {
      var elt = document.getElementById(elementID);                       
      var hssubcode = document.getElementById(elementID).value;
      var elementIDsuffix = parseInt(elementID.substring(5)) - 1; 
      // to make it compatible with array index
  
      var othercodes = [
          document.getElementById('hssub1').value,
          document.getElementById('hssub2').value,
          document.getElementById('hssub3').value,
          document.getElementById('hssub4').value,
          document.getElementById('hssub5').value,
          document.getElementById('hssub6').value
      ];
      for(var i=0; i&lt;=5; i++){
          if(i != elementIDsuffix){
              if(othercodes[i] == hssubcode){
                  document.getElementById("submit").setAttribute("disabled","disabled"); 
                  // so that it stops form submission;
                  document.getElementById("notification").innerHTML = elt.options[elt.selectedIndex].text + " Subject Already Choosen!";
                  return false;
                  break;
              } else {
                  document.getElementById("notification").innerHTML = "";
                  document.getElementById("submit").removeAttribute("disabled");    
                  // so that it allows form submission again;
              }
          }    
      }
  }
  </code></pre>
  
  <p>The above script fails when the user first selects say Bengali, then again  Bengali, then again Bengali and finally changes the second choice. I can understand the problem in the code, but being a novice programmer, I am unable to think how to build up the required logic. Please help.</p>