Изменить общую стоимость при изменении выбора, чтобы найти итоговые

Question

Я пытаюсь получить общую сумму за различные билеты, которые доступны. из поля выбора пользователь может выбрать количество билетов, которое он хочет. в итоге отображается общая сумма. Моя проблема заключается в том, что при изменении выбора количества билетов он добавляется к предыдущей сумме. я хочу вычесть его, а затем добавить правильную сумму. У меня есть этот код.

Это html, который у меня есть.

<form> 
<div class="row"> 
    <div class="col-xs-12 col-sm-4"> 
    <label>OAP</label> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
    <select class="venet-stock" data-price="20"> 
     <option value="1"> 
      1             
     </option> 
     <option value="2"> 
      2             
     </option> 
     <option value="3"> 
      3             
     </option> 
     <option value="4"> 
      4             
     </option> 
     <option value="5"> 
      5             
     </option> 
     <option value="6"> 
      6             
     </option> 
    </select> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
    <p class="number"> 
     £<span>20</span> 
    </p> 
    </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-4"> 
     <label>General</label> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
    <select class="venet-stock" data-price="35"> 
     <option value="1"> 
      1             
     </option> 
     <option value="2"> 
      2             
     </option> 
     <option value="3"> 
      3             
     </option> 
     <option value="4"> 
      4             
     </option> 
     <option value="5"> 
      5             
     </option> 
     <option value="6"> 
      6             
     </option> 
    </select> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
    <p class="number"> 
     £<span>35</span> 
    </p> 
    </div> 
</div> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-4"> 
      <label>Concession</label> 
      </div> 
     <div class="col-xs-12 col-sm-4"> 
     <select class="venet-stock" data-price="50"> 
     <option value="1"> 
      1             
     </option> 
     <option value="2"> 
      2             
     </option> 
     <option value="3"> 
      3             
     </option> 
     <option value="4"> 
      4             
     </option> 
     <option value="5"> 
      5             
     </option> 
     <option value="6"> 
      6             
     </option> 
    </select> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
    <p class="number"> 
     £<span>50</span> 
    </p> 
    </div> 
    </div> 
    <p class="push h20"></p> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-4"> 
    <label>Total</label> 
    </div> 
     <div class="col-xs-12 col-sm-4"> 
     <p class="total"> 
      £<span id="price-total">50</span> 
     </p> 
    </div> 

Это мой Jquery код.

var price_total = 0; 
jQuery('.venet-stock').change(function() { 
    price = jQuery(this).attr('data-price'); 
    guest = jQuery(this).val(); 
    price_total += guest*price; 
    jQuery('#price-total').text(price_total); 
}); 

Заранее спасибо.

Answer 1

Рабочая Fiddle https://jsfiddle.net/t3vs4dgx/

HTML код. Добавьте только параметр «Нуль» для каждого раскрывающегося списка.

<form> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-4"> 
     <label>OAP</label> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
     <select class="venet-stock" data-price="20"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     </select> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
     <p class="number">£<span>20</span></p> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-4"> 
     <label>General</label> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
     <select class="venet-stock" data-price="35"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     </select> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
     <p class="number">£<span>35</span></p> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-4"> 
     <label>Concession</label> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
     <select class="venet-stock" data-price="50"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     </select> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
     <p class="number">£<span>50</span></p> 
    </div> 
    </div> 
    <p class="push h20"></p> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-4"> 
     <label>Total</label> 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
     <p class="total">£<span id="price-total">0</span></p> 
    </div> 
    </div> 
</form> 

JS Code. Прохождение всех выборов при изменении и добавление price_total для этого прогона

$('.venet-stock').change(function() { 
    var price_total = 0; 
    $('.venet-stock').each(function(i,e){ 
     price = $(e).attr('data-price'); 
     guest = $(e).val(); 
     price_total += guest*price; 
    }); 
    jQuery('#price-total').text(price_total); 
});