使用 Javascript and/or jQuery 计算 select 选项的值

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 来做。）我想要这样的输出：The final price is 18,43 €. You saved 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 等值。据我所知，总线 Javascript 需要 value="" 字段中的计算值。或者有解决方法吗？

Answer 1

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

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

使用 Javascript and/or jQuery 计算 select 选项的值

Calculate the values from select option with Javascript and/or jQuery

html

javascript

jquery

calculator