javascript - jQuery to iterate through table and select dropdown lists -

What I thought was a simple task.

A table of the drop down list, and a text box at the end of each line.

All I want to do is loop through each row of the table, get "drop-down value of the hour" and increase the "rate dropdown value" - and the result in the text box.

I keep on getting undefined while trying to get dropdown list values.

My HTML is:

  & lt; Table class = "hour-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 = "hours selected 1" name = "hours selected" square = "hours" & gt; & Lt; Option value = "1" & gt; 1 & lt; / Options & gt; & Lt; Option value = "2" & gt; 2 & lt; / Options & gt; & Lt; / Select & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; Select ID = "rate selected 1" name = "rate selected" square = "rate" & gt; & Lt; Option value = "1" & gt; 1 & lt; / Options & gt; & Lt; Option value = "2" & gt; 2 & lt; / Options & gt; & Lt; / Select & gt; & Lt; / TD & gt; & Lt; Td class = "date-total" & gt; & Lt; Input type = "text" category = "date-total" name = "date-total -01" value = "" /> & Lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; & Lt; Select ID = "Hours Selected 2" Name = "Hours Selected" Category = "Hours" & gt; & Lt; Option value = "1" & gt; 1 & lt; / Options & gt; & Lt; Option value = "2" & gt; 2 & lt; / Options & gt; & Lt; / Select & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; Select ID = "rate selected 2" name = "select rate" class = "rate" & gt; & Lt; Option value = "1" & gt; 1 & lt; / Options & gt; & Lt; Option value = "2" & gt; 2 & lt; / Options & gt; & Lt; / Select & gt; & Lt; / TD & gt; & Lt; Td class = "date-total" & gt; & Lt; Input type = "text" category = "date-total" name = "date-total -01" value = "" /> & Lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; & Lt; Select ID = "hours selected 3" name = "hours selected" category = "hours" & gt; & Lt; Option value = "1" & gt; 1 & lt; / Options & gt; & Lt; Option value = "2" & gt; 2 & lt; / Options & gt; & Lt; / Select & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; Select ID = "rate selected 3" name = "select rate" class = "rate" & gt; & Lt; Option value = "1" & gt; 1 & lt; / Options & gt; & Lt; Option value = "2" & gt; 2 & lt; / Options & gt; & Lt; / Select & gt; & Lt; / TD & gt; & Lt; Td class = "date-total" & gt; & Lt; Input type = "text" category = "date-total" name = "date-total -01" value = "" /> & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; P & gt; & Lt; One square = "counting" href = "#" headline = "calculate row" & gt; Calculate & lt; / A & gt; & Lt; / P & gt;  

My jQuery is:

  $ (document) .ready (function () {$ ('calculate'). ('Click', function () ($. ('. Hour-table tr'). (Function () {var hours = $ (this) .find ('select.hours') .val (); var rate = $ (this) (' Select.rate '). Val (); var dateTotal = (hour * rate); $ (this) .find (' input.date-total ') .val (dateTotal);}); return;}); });  

Can anyone see where I've been wrong? Here's a bella:

thanks, Mark

You have 2 problems In the code, for the first time you are ignoring the first line (the header row in the table) in your calculation, the second returning; which is excluded and we e.preventDefault (); , instead, you can fix them:

  $ ('. Hour-table tr'). Each (function () {var hours = $ (this) .find ('val') var rate = $ (this) .find ('select.rate'). Val (); if (hours! == undefined & And rate! == undefined) {var DateTotal = (hour * rate); $ (this) .find ('input dotate-total') .val (dateTotal);}}); e.preventDefault (); < If I had, I would change it:  
  $ (document) .ready (function () {$ ('calculate') (' Click on ', function (e) {$ ('. Hour-table tr '). (Function () {var hours = $ (this). Find (' select.hours & gt; option: check '). Val (); var rate = $ (this) .find ('select.rate & gt; option: check'). Val (); // This is your header code (If the hour! == undefined & rate! == undefined) {var dateTotal = (hour * rate); $ (this) .find ('input.date-total'). Val (dateTotal) ;}}); E.preventDefault ();}}};  
 
 As you are seeing, we : checked  instead of : Select the selected , you can select the selected option in the selected node. 
 
 And this is your job