使用JavaScript和/或jQuery計算select選項的值

Question

首先：我知道我應該提供我的解決方案並解釋什么不起作用。 但是不幸的是我仍在學習HTML和PHP，所以我沒有Java的經驗。 以為，希望有人能幫助我。

在我的網站上有一個表格。 這種形式的代碼如下：

  <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 € The final price is 18,43 €. You saved 1,57 € 。

從“ method_of_payment”中獲得的現金返還必須遵循最終價格的大小和折扣。 這意味着，對於size = BBB ， discount = Option2 method_of_payment = debit和method_of_payment = debit ： 20-(20/100*5)=19 | 19-(19/100*3)=18,43 € method_of_payment = debit 20-(20/100*5)=19 | 19-(19/100*3)=18,43 € 20-(20/100*5)=19 | 19-(19/100*3)=18,43 €

另一個問題是，我擁有AAA和Option1類的值，並且在提交表單時在數據庫中進行transfer 。 據我所知，總線在value=""字段中需要JavaScript進行計算。 還是有解決方法？

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/