Вычислить значения из опции выбора с помощью 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()); 
    }); 

}); 

** EDIT **

Рабочий пример:

https://jsfiddle.net/2cs8vcLo/