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

Question

基本上，在我看来，我有用于构建 PC 的下拉列表（MVC 2），对于所有非 MVC 人员，下面的内联视图代码将生成一个标准下拉列表：

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

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

我不想恢复每当我希望获取下拉列表中任何选项的价格时，都会发送到 Ajax 请求，因为我只有 ProductID 作为值和零件名称，但没有价格。我正在考虑做类似下面的事情，这样我就可以在隐藏表的表行中包含所有产品 ID 和相应的价格。因此，ProductID 位于该行的一个单元格中，价格位于其旁边的单元格中。现在我需要一个 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 可以使用 nth-child 选择器 挂钩表的行索引，但也许对您的设计进行调整会让查找价格变得更容易：

<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);
});