使用下拉列表的 Javascript 计算
Posted
技术标签:
【中文标题】使用下拉列表的 Javascript 计算【英文标题】：Javascript Calculation Using DropDown List 【发布时间】：2019-04-17 17:39:54 【问题描述】：我有一个定价表，其中包含一些取决于下拉列表选择的变量。 JSFIDDLE 显示了预期的结果。
所需的结果取决于下拉选择。选择一个选项后，表格中应发生以下更改：
-
“项目成本”应显示所选价格。
“总”价格应乘以“数量”。显示总运费。
“总计”应该是包含产品 + 运费在内的总列的总和。
这是下拉选项：
<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>
如果您能在 jsfiddle 上展示，我将不胜感激。谢谢。
【问题讨论】：
为了能够帮助您，而不是为您编写代码，请提供您尝试使用的 javascript 示例。如果它不工作，我们可以指导你让它工作。 很遗憾，我不懂 javascript，因为我只使用 UX。你还能帮忙吗？ 那很不幸。请查看：***.com/help/on-topic 【参考方案1】：这是一个您可以考虑的示例。由于您不熟悉 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事件回调。我们收集一些细节，然后执行一些基本的数学函数。
希望对您有所帮助。
【讨论】：
这太棒了！你真棒！谢谢！以上是关于使用下拉列表的 Javascript 计算的主要内容，如果未能解决你的问题，请参考以下文章
如何使用Javascript根据先前的下拉值显示第二个下拉列表