JScript that would allow me to add together values in table cells, which values to add will depend on which option is selected from a dropdown list

Basically I have drop down lists for building a PC as such in my view (MVC 2), for all you non-MVC folks, the below inline view code will yield a standard dropdown list(s):

&l开发者_如何学编程t;%: Html.DropDownList("CPUList", new SelectList((IEnumerable)Model.processor, "ProductID","Name")) %>

<%: Html.DropDownList("MBList", new SelectList((IEnumerable)Model.motherboard, "ProductID","Name")) %>

I don't wish to revert to an Ajax request everytime I wish to get a price for any option in the dropdown list(s) since I have only ProductID as value and Name of part but not price. I was thinking about doing something like the below so I can have all productID's and respective price in table rows in a hidden table. So ProductID in one cell of the row and price in the cell next to it. Now I need a JavaScript that will use the value (ProductID) of any selected option in the dropdown list to find the price for it in the hidden table by using the ProductID in the table as key and get the price from the next cell in the same row. Do this for all selected options in the dropdown lists, add them up and display the total. Can this be done? Does a HTML table have an index that can be hooked into with Jscript ?

<table border="1" id="ProcessorPrices" style="visibility: none;">
<% foreach (var itm in Model.processor)
{ %>

<tr>
<td id="cpuprice"><%: itm.ListPrice %></td>
<td id="cpupid"><%: itm.ProductID %></td>

</tr>

<% } %>


</table>

Thanks..

---

JQuery can hook into the index of the rows of a table using the nth-child selector, but perhaps a tweak to your design would make looking up the prices easier:

<table border="1" id="ProcessorPrices" style="visibility: none;">
<% foreach (var itm in Model.processor)
{ %>

<tr>
<td id="cpupid_<%: itm.ProductID %>"><%: itm.ListPrice %></td>    
</tr>

<% } %>


</table>

You could then look up the price using something like:

var allSelects = $("select");
allSelects.change(function() {
  var total = 0;
  allSelects.filter("[selectedIndex!='0']").each(function() {
    total += parseFloat($("#cpupid_" + $(this).val()).text());
  });
  $("#resultBox").html(total);
});