title: Iterating over options from multiple select boxes in jQuery
body: <p>I have several select boxes (the exact number is dynamic), each containing the same values. When an option is selected in one box, I want to <code>disable</code> this value in all the other select boxes.</p>
  
  <p>As shown in this <a href="http://jsfiddle.net/dirtyd77/J6ZYu/2/" rel="nofollow">jsFiddle</a>, when you select a value in the first select box, it correctly disables that value in the second select box. When you select a value in the second select box, the code correctly disables that value in the first select box; however, it enables (i.e. does not disable) the original selected value from the first select box, in the second box.</p>
  
  <p><strong>To replicate:</strong> select <code>Value One</code> for the first select box. <code>Value One</code> is correctly disabled in the second select box. Now select <code>Value Two</code> in the second select box. It's disabled in the first select box, but now <code>Value One</code> is incorrectly enabled in the second select box.</p>
  
  <p>After hours of trying to diagnose the issue, it seems that my <code>.each</code> statement only processes the first select box, and does not advance to the second select box to iterate over it's values. <strong>Edit:</strong> Actually it doesn't stop processing; if you remove line 22-24 from the jsFiddle (the else statement that enables the values that are no longer selected), and then select <code>Value One</code> then <code>Value Three</code> in the first select box the code correctly processes the second select box and disables <code>Value One</code> and <code>Value Three</code>. So it's a problem with the multiple iterations over <code>selectedAreas</code>?</p>
  
  <p><strong>How can I iterate over all the options from all the select boxes on the page with my <code>area_select</code> class?</strong></p>
  
  <p><strong>My jQuery:</strong></p>
  
  <pre><code>$(function() {
      $(document).on('change', '.area_select', function (e) {
          generateSelectedAreas();            
      });
  });
  
  function generateSelectedAreas()
  {
      var selectedAreas = new Array();
  
      //Get all the currently selected areas
      $('.area_select option:selected').each(function () {
              if ($(this).val() != '') {
                  selectedAreas.push($(this).val());
              }
      });
  
      //The selectedAreas array contains all the correct values, as shown here
      console.log(selectedAreas);
  
      $('.area_select&gt;option:not(:selected)').each(function () {
          for(var counter=0; counter &lt; selectedAreas.length; counter++) {
              if (selectedAreas[counter] == $(this).val()) {
                  $(this).attr("disabled", true);
              }
              else {
                  $(this).attr("disabled", false);    
              }
          }       
      });
  
      return selectedAreas;
  }
  </code></pre>