title: jQuery to iterate through table and select dropdown lists
body: <p>I have what I thought would be a simple task.</p>
  
  <p>A table of drop down lists, and a text box at the end of each line.</p>
  
  <p>All I want to do is loop through each row of the table, get the "hours dropdown value" and multiply by the "rate dropdown value" - and place the result in the text box.</p>
  
  <p>I just keep getting undefined when trying to get the dropdownlist values.</p>
  
  <p>My HTML is:</p>
  
  <pre><code>&lt;table class="hours-table"&gt;
  &lt;tr&gt;
      &lt;th&gt;Hours&lt;/th&gt;
      &lt;th&gt;Hourly Rate&lt;/th&gt;
      &lt;th&gt;Date Total&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;select id="HoursSelected1" name="HoursSelected" class="hours"&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;select id="RateSelected1" name="RateSelected" class="rate"&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="date-total"&gt;
          &lt;input type="text" class="date-total" name="date-total-01" value="" /&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;select id="HoursSelected2" name="HoursSelected" class="hours"&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;select id="RateSelected2" name="RateSelected" class="rate"&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="date-total"&gt;
          &lt;input type="text" class="date-total" name="date-total-01" value="" /&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;select id="HoursSelected3" name="HoursSelected" class="hours"&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;select id="RateSelected3" name="RateSelected" class="rate"&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="date-total"&gt;
          &lt;input type="text" class="date-total" name="date-total-01" value="" /&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;p&gt;&lt;a class="calculate" href="#" title="calculate row"&gt;Calculate&lt;/a&gt;
  
  &lt;/p&gt;
  </code></pre>
  
  <p>My jQuery is:</p>
  
  <pre><code>$(document).ready(function () {
  $('.calculate').on('click', function () {
      $('.hours-table tr').each(function () {
          var hours = $(this).find('select.hours').val();
          var rate = $(this).find('select.rate').val();
          var dateTotal = (hours * rate);
          $(this).find('input.date-total').val(dateTotal);
      }); 
      return false;
  }); 
  });
  </code></pre>
  
  <p>Can anyone see where I've gone wrong please?  There is a fiddle here: <a href="http://jsfiddle.net/Lr5pq/26/" rel="nofollow">http://jsfiddle.net/Lr5pq/26/</a></p>
  
  <p>Thank you, Mark</p>