title: Disable select option in group of select dropdowns when option is selected
body: <p>What I'm trying to do: I have multiple select dropdowns, if an option is selected in one of the select dropdowns and the value exists in any of the other dropdowns the value should be disabled/unselectable, it again can become enabled/selectable if the selection is changed.</p>
  
  <p>What happens with current code: it works about 50%, I can't pinpoint the issue, but I think because I'm applying a for loop some values get skipped and not disabled and sometimes the "Select" default option becomes disabled?!</p>
  
  <p>Approach: The way I wrote my code was when a selection from the dropdown box occurs, enable all options, get the first dropdown's current selected value, if it's not the default "Select" then go through every dropdown box and disable any matching values, then repeat this process for the second dropdown's current selected value and so on.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/haakym/r2y73ndt/" rel="nofollow">http://jsfiddle.net/haakym/r2y73ndt/</a></p>
  
  <p>Code:
  HTML:</p>
  
  <pre><code>&lt;div id="nomineeInfo"&gt;
  &lt;div&gt;
      &lt;label&gt;Manager&lt;/label&gt;
      &lt;select class="positionTypes" id="pos_manager"&gt;
          &lt;option value="0"&gt;Select&lt;/option&gt;
          &lt;option value="1"&gt;John Smith&lt;/option&gt;
          &lt;option value="2"&gt;Jane Smith&lt;/option&gt;
          &lt;option value="4"&gt;John Smoe&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Deputy&lt;/label&gt;
      &lt;select class="positionTypes" id="pos_deputy_manager"&gt;
          &lt;option value="0"&gt;Select&lt;/option&gt;
          &lt;option value="1"&gt;John Smith&lt;/option&gt;
          &lt;option value="2"&gt;Jane Smith&lt;/option&gt;
          &lt;option value="3"&gt;John Doe&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Finance&lt;/label&gt;
      &lt;select class="positionTypes" id="pos_finance"&gt;
          &lt;option value="0"&gt;Select&lt;/option&gt;
          &lt;option value="1"&gt;John Smith&lt;/option&gt;
          &lt;option value="3"&gt;John Doe&lt;/option&gt;
          &lt;option value="4"&gt;John Smoe&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Javascript:</p>
  
  <pre><code>$('#nomineeInfo').on('change', '.positionTypes', function () {
      var selectedValue = $(this).val();
      var dropdownOnChangeId = $(this).prop('id');
      var positionTypesEn = ['manager', 'deputy_manager', 'finance'];
  
      // set all enabled
      for (var i = 0; i &lt; 7; i++) {
          $('#pos_'+positionTypesEn[i]).each(function(){
              $("option", this).removeAttr('disabled');
          });
      };
  
      for (var i = 0; i &lt; 7; i++) {
          // if position type selected value is not 0, i.e. if it's not "Select"
          if( $('#pos_' + positionTypesEn[i]).val() != 0 ){
              // go through each option in every dropdown
              for (var j = 0; j &lt; 7; j++) {
                  console.log( positionTypesEn[j] ); // show current dropdown
                  $('#pos_' + positionTypesEn[j] + ' option').each(function(k){
  
                      if( !$(this).is(':selected') ){ 
                          if( $(this).val() == selectedValue &amp;&amp; $(this).val() != 0 ){
                              $(this).prop('disabled', 'true');
                              console.log('disabled: ' +  $(this).val() );
                          }
                      }
                  });
              }
          }
      }
  });
  </code></pre>
  
  <p>Any help is much appreciated!</p>