title: jquery: grab the values from multiple select menus each time a new option is chosen
body: <p>I'm building a live price quote form with jQuery, using a series of select menus. I've come up with the code below, which grabs the default values from each select menu and adds them together:</p>
  
  <pre><code>$(document).ready(function(){
   $('select &gt; option:selected').each(function() {
    var value = $(this).attr('label');
  
    total = parseFloat(total) + parseFloat(value);
    total = total.toFixed(2);
   });
   printTotal(total); // prints the total price
  });
  </code></pre>
  
  <p>The only problem is that this only works when the page loads. I'd like the price to be updated each time a new value is selected in any of the select menus (there are 6).</p>
  
  <p>I tried adding <strong>$("select").change(function () { ... }</strong> with a trigger (as shown in the <a href="http://docs.jquery.com/Selectors/selected" rel="nofollow noreferrer">example code here</a>) but that adds up all of the values for each of the select menus (i.e., the total is 6x what it should be).</p>
  
  <p>I've searched the docs but can't figure which event to use. Can anyone help?</p>
  
  <p>HTML sample if it helps:</p>
  
  <pre><code>&lt;select id="colors"&gt;
   &lt;option label="25.00" value="XYZ"&gt;1 color&lt;/option&gt;
   &lt;option label="50.50" value="ABC"&gt;2 colors&lt;/option&gt;
   &lt;option label="75.75" value="MNO"&gt;3 colors&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>