JScript, который позволил бы мне добавлять вместе значения в ячейках таблицы, какие значения добавить будут зависеть от того, какая опция выбрана из выпадающего списка

Question

По моему мнению, у меня есть выпадающие списки для сборки ПК как такового (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 и имя детали, но не цена. Я думал о том, чтобы сделать что-то вроде ниже, чтобы я мог иметь все productID и соответствующие цены в строках таблицы в скрытой таблице. Итак, 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);
});