Если вы хотите, чтобы изменения на стороне клиента обновляли некоторый контент, вам нужно использовать функцию javascript / jQuery .change () для элемента, который вы хотите наблюдать.
Подробнее см. Здесь
в вашем случае это будет:
$("#shippingmethod").change(function() {
// start by fetching the value of the selected option
var shippingPrice = $(this).val();
// do some other stuff to get other values, calculate, and display results
});
Другие вещи, которые вам нужно будет сделать, включают использование функции .html () для изменения значений, отображаемых в некоторых элементах вашей таблицы, например: $("#shippingprice").html("$" + shippingPrice);
Обратите внимание, что функция .html () также может извлекать значение из элемента:
// Get the value displayed inside the id="shippingqty" td
var shippingQty = $("#shippingqty").html();
Обратите внимание, однако, что это даст вам строковый тип var, вам нужно будет использовать parseFloat(shippingQty);, чтобы сделать с ним некоторые математические вычисления.
Редактировать: Что касается вашего комментария, есть быстрая (и несколько грязная) скрипка, которую вы должны изучить (обратите внимание на комментарии в html). Что касается javascript, лучшее место для начала id, вероятно, основы javascript @ MDN .
$("#shippingmethod").change(function() {
// Get the value from dropdown
var shippingPrice = $(this).val()
// Get the value from id="shippingqty" td content
var shippingQty = $("#shippingqty").html();
// get the value from id="producttotal" td content
var prodPriceWithSymbol = $("#producttotal").html();
// remove the $ symbol from prodPriceWithSymbol text
var productTotal = prodPriceWithSymbol.substring(1, prodPriceWithSymbol.length);
// strings to floats, multiply, round to 2 decimals
var shippingTotal = (parseFloat(shippingPrice) * parseFloat(shippingQty)).toFixed(2);
// strings to float, add, round to 2 decimals
var grandTotal = (parseFloat(shippingTotal) + parseFloat(productTotal)).toFixed(2);
// Set id="shippingprice" td content
$("#shippingprice").html("$" + shippingPrice);
// set id="shippingtotal" td content
$("#shippingtotal").html("$" + shippingTotal);
// set id='grandtotal" td content
$("#grandtotal").html("$" + grandTotal);
});
.pr8 {
padding-right: 8px;
}
.red {
font-weight: 600!important;
color: #ff0000;
}
.spacer,
.help-block {
clear: both;
padding: 0 7px;
}
.fw6 {
font-weight: 600;
}
.full-width {
width: 100%;
}
table#product-list {
width: 100%;
}
table#product-list thead tr th {
background-color: #fff !important;
font-weight: 500;
color: #0080a6 !important;
border-bottom: solid 2px #0080a6;
padding: 5px 2px 8px 2px;
}
table#product-list tbody {
background-color: #fff;
color: #333 !important;
}
table#product-list tbody tr td:first-child {
font-weight: 500;
text-align: left !important;
}
table#product-list tbody tr td {
font-weight: 300;
text-align: right !important;
}
table#product-list tbody tr td:last-child {
font-weight: 600;
text-align: right !important;
}
table#product-list tbody tr#product-totals {
clear: both;
padding-top: 10px;
margin-top: 10px;
}
table#product-list tbody tr#product-totals td:last-child {
border-top: dotted 1px #0080a6;
padding: 4px 0;
text-align: left;
font-weight: 600;
border-bottom: solid 1px #0080a6;
}
table#product-list tbody tr td.qty {
text-align: center !important;
}
table#product-list tbody tr td.item-cost {
padding: 0 4px 0 0;
}
table#product-list tbody tr td.tax {
margin: 0 5px 0 3px;
}
table#product-list tbody tr td.total {
margin: 0 0 0 5px;
}
<!-- Added jQuery loading -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="">
<!-- Added value="0" here -->
<option value="0" 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>
<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" id="producttotal">$10.68</td>
</tr>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr>
<td>Shipping Cost</td>
<!-- Added id here -->
<td class="qty red" id="shippingqty">1</td>
<!-- Added id here -->
<td class="item-cost red" id="shippingprice">$2.95</td>
<!-- May add an id to be accessed if needed -->
<td class="tax">$0.00</td>
<!-- Added id here -->
<td class="total red" id="shippingtotal">$5.90</td>
</tr>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr id="product-totals">
<td colspan="4"></td>
<!-- Added id here -->
<td class="total red" id="grandtotal">$13.02</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>