Вот пример, который вы можете рассмотреть. Поскольку вы не знакомы с JavaScript и прокси-сервером jQuery, ответ может вам не сильно помочь.
Рабочий пример: http://jsfiddle.net/Twisty/tn3kd04o/23/
HTML
<form id="ReviewShippingAndPayment" name="ReviewShippingAndPayment" method="post" action="/Distributor/Shop/Product-List">
<div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 p0">
<div class="pl8 bbcustom p0">
<h2 class="page-header"><i class="fa fa-cube pr8 hidden-sm hidden-xs"></i>Shipping Method Selection</h2>
<p>
The desired outcome is driven by the "<span class="fw6">Select a Shipping Method</span>" dropdown.<br /><br />When a shipping method is selected, then the "Item Cost" should be multiplied by the "Qty." and displayed in the Shipping Cost Total
column.
<br /><br />Such selection should also update the final cost that include the Product Cost + Total Shipping.
</p>
<span class="spacer"></span>
</div>
<div class="spacer"></div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p0">
<div class="shipping-method-container">
<div class="field-wrapper">
<div class="input-group full-width">
<span class="input-group-addon main-color hidden-sm hidden-xs">$</span>
<select id="shippingmethod" class="selectpicker form-control shipping-method" name="shippingmethod" aria-label="Shipping Method" tabindex="">
<option value="" selected="">Selet a Shipping Method</option>
<option value="2.95">US Mail - $2.95</option>
<option value="3.50">Priority Mail - $3.50</option>
<option value="4.67">Fedex - $4.67</option>
</select>
</div>
</div>
<span class="help-block"></span>
</div>
<div class="clearfix"></div>
<hr style="margim:0px;padding:0;" />
<div class="clearfix"></div>
<table id="product-list">
<thead>
<tr>
<th class="text-left">Item</th>
<th class="text-center">Qty.</th>
<th class="text-center">Item Cost</th>
<th class="text-center">Tax</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr class="prod-row">
<td>Product Name</td>
<td class="qty">1</td>
<td class="item-cost">$10.00</td>
<td class="tax">$0.68</td>
<td class="total">$10.68</td>
</tr>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr class="ship-row">
<td>Shipping Cost</td>
<td class="qty red">1</td>
<td class="item-cost red">$2.95</td>
<td class="tax">$0.00</td>
<td class="total red">$5.90</td>
</tr>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr id="product-totals">
<td colspan="4"></td>
<td class="total red">$13.02</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Некоторые незначительные изменения в HTML, чтобы было проще обращаться.
JavaScript
$(function() {
function calcTotal() {
var p = {
qty: parseInt($(".prod-row .qty").text().trim()),
tax: parseFloat($(".prod-row .tax").text().trim().slice(1)),
price: parseFloat($(".prod-row .item-cost").text().trim().slice(1))
};
var s = {
qty: parseInt($(".ship-row .qty").text().trim()),
tax: parseFloat($(".ship-row .tax").text().trim().slice(1)),
price: parseFloat($(".ship-row .item-cost").text().trim().slice(1))
}
var t = 0.00;
if (p && s) {
t = (p.qty * p.price + p.tax) + (s.qty * s.price + s.tax);
}
console.log(p, s, t);
return t;
}
$("#shippingmethod").change(function(e) {
var shipQty = parseInt($(".ship-row .qty").text());
var shipCost = parseFloat($(this).val());
$(".ship-row .item-cost").html("$" + shipCost.toFixed(2));
$(".ship-row .total").html("$" + (shipQty * shipCost).toFixed(2));
var total = calcTotal();
$("#product-totals .total").html("$" + total.toFixed(2));
});
});
Когда раскрывающийся список изменяется, вызывается обратный вызов события change. Мы собираем несколько деталей и затем выполняем некоторые основные математические функции.
Надеюсь, это поможет.