javascript - 使用 Javascript 和/或 jQuery 计算选择选项的值

Question

首先:我知道我应该提供我的解决方案并解释什么不起作用。但不幸的是我仍在学习 HTML 和 PHP，所以我没有 Javascript 的经验。我想，我希望有人能帮助我。

在我的网站上有一个表格。在这种形式中有这样的代码:

    <select name="size">
    	<option value="" disabled selected>Size ↓</option>
    	<option value="AAA">AAA (10 €)</option>
    	<option value="BBB">BBB (20 €)</option>
    	<option value="CCC">CCC (30 €)</option>
    	<option value="DDD">DDD (40 €)</option>
    </select>
    
    <select name="discount">
    	<option value="" disabled selected>Option ↓</option>
    	<option value="Option1">Option 1 (0 %)</option>
    	<option value="Option2">Option 2 (-5 %)</option>
    	<option value="Option3">Option 3 (-8 %)</option>
    </select>
    
    <select name="method_of_payment">
    	<option value="" disabled selected>Method of payment ↓</option>
    	<option value="transfer">Transfer (0 % cashback)</option>
    	<option value="debit">Debit (-3 % cashback)</option>
    </select>

这就像一家商店。我想用 Javascript 预先计算用户的最终价格。 (我不想重新加载网站。否则我会用 PHP 来完成。)我想要这样的输出: 最终价格是 18,43 €。您节省了 1.57 欧元。

“method_of_ payment”的现金返还必须按照尺码和折扣的最终价格进行。这意味着对于 size = BBB 和 discount = Option2 以及 method_of_ payment = debit:20-(20/100*5)=19 | 19-(19/100*3)=18,43 €

另一个问题是，当提交表单时，我的数据库中有诸如 AAA 和 Option1 以及 transfer 之类的值。据我所知，总线需要在 value="" 字段中计算值。或者有解决办法吗？

Answer 1

确保您在每个选项的 value 属性中存储实际值:

<select name="size">
    <option value="" disabled selected>Size ↓</option>
    <option value="10">AAA (10 €)</option>
    <option value="20">BBB (20 €)</option>
    <option value="30">CCC (30 €)</option>
    <option value="40">DDD (40 €)</option>
 </select>

使用jQuery，您可以执行如下操作:

var price = $('select[name=size]').val() * ($('select[name=discount]').val() * 1/100) * $('select[name=method_of_payment]').val();

如果您有一个 HTML 元素(例如标签)，您可以像这样显示它:

$('.mylabel').text(price);

我猜你以前没有这样做过。因此，更进一步，您需要考虑每次 select 的值发生变化时都需要重新运行计算。所以一个完整的例子看起来像这样:

$(document).ready(function () {
   // this will run on every select value change. if you want it to only run for those specific selects, add the same class in all of them and change the selector to $('select.yourclass')
   $('select').on('change', function() {
      $('.mylabel').text($('select[name=size]').val() * ($('select[name=discount]').val() * 1/100) * $('select[name=method_of_payment]').val());
   });

});

** 编辑 **

一个工作示例:

https://jsfiddle.net/2cs8vcLo/