使用Javascript和/或jQuery計算選擇選項的值

Question

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

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

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

我收集你以前沒有這樣做過。因此，要進一步推進，您需要認爲每次選擇值的變化都需要重新運行計算。因此，一個完整的例子會是這個樣子：

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