JScript，它将允许我在表格单元格中添加值，要添加哪些值将取决于从下拉列表中选择哪个选项

Question

基本上，我有一个下拉列表，用于在我的视图(MVC 2)中构建PC，对于所有非MVC的人，下面的内联视图代码将产生一个标准的下拉列表:

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

我不希望每次我希望在下拉列表中获得任何选项的价格时都恢复到Ajax请求，因为我只有ProductID作为值和部分名称，而不是价格。我正在考虑做下面的事情，这样我就可以在隐藏表的表行中拥有所有productID和各自的价格。因此ProductID在该行的一个单元格中，price在它旁边的单元格中。现在我需要一个JavaScript，它将使用下拉列表中任何选定选项的值(ProductID)在隐藏表中查找其价格，方法是使用表中的ProductID作为键，并从同一行中的下一个单元格获取价格。对下拉列表中所有选择的选项执行此操作，将它们加起来并显示总数。这能做到吗?HTML表有一个可以用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>

谢谢. .

Answer 1

JQuery可以使用第n子选择器钩入表的行索引，但也许对您的设计进行调整可以使查找价格更容易:

<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>

然后您可以使用如下命令查找价格:

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