title: check if any select box has changed after button click
body: <p>I want to check a group of select boxes and see if they changed after a button has clicked.</p>
  
  <pre><code>&lt;select name="data[model][that]" class="location_dropdown"&gt;
      &lt;option value="value1"&gt;value 1&lt;/option&gt;
      &lt;option value="value2"&gt;value 2&lt;/option&gt;
      &lt;option value="value3" selected="selected"&gt;value 3&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="data[model][that]" class="location_dropdown"&gt;
      &lt;option value="value1"&gt;value 1&lt;/option&gt;
      &lt;option value="value2" selected="selected"&gt;value 2&lt;/option&gt;
      &lt;option value="value3"&gt;value 3&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="data[model][other]" class="location_dropdown"&gt;
      &lt;option value="value1" selected="selected"&gt;value 1&lt;/option&gt;
      &lt;option value="value2"&gt;value 2&lt;/option&gt;
      &lt;option value="value3"&gt;value 3&lt;/option&gt;
  &lt;/select&gt;
  
  $(document).ready(function() {
  
      $('#update-selected-btn').click(function(){
          $('.location_dropdown').each(function(){
  
  
  
          });
      });
  
      if state hasnt changed on any drop downs alert("nothing selected")
  
  });
  </code></pre>
  
  <p>Obviously cant use onchange as I want to check for change when button click triggered. I was thinking about maybe building a array of values and checking them against each other, but wonder if there is another solution.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I did attempt this, but syntax isnt right.</p>
  
  <pre><code>$('.location_dropdown').each(function(){
      if ($(this + " option:selected").prop('selected') == 'selected'){
         changed++;
      }
  });
  </code></pre>