使用下拉列表更新定价表

Question

我有一个定价表，其中包含一些取决于下拉列表选择的变量。JSFIDDLE显示所需的结果。

所需的结果是可靠的下拉选择。选择后，应在表中进行以下更改：

1. "项目成本"应显示所选价格
2. "总价"应乘以"数量"以显示总运输成本
3. 总的"总额"应该是包括产品+运输成本在内的总列的总和

以下是下拉选项：

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

下表如下：

<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">2</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>
<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>

如果能在这种情况下得到任何帮助，我将不胜感激。谢谢

Answer 1

如果您希望在客户端进行更改以更新某些内容，则需要对要观察的元素使用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，最好的起点可能是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>