使用select选项更新动态生成的两个框的价格

我正试图在jQuery文档的帮助下实现这一点，但到目前为止还没有成功。

我有两个具有0初始值的框paynow和payfull，但我正在用产品价格动态填充这些框（jQuery）。

现在，我必须使用select选项进一步更新这些值以折扣价格（乘以data-percent）。这是HTML。

<select class="discount">
  <option data-percent="0">Select Discount Coupon</option>
  <option data-percent="5">ABCD</option>
  <option data-percent="10">EFGH</option>
  <option data-percent="15">IJKL</option>
</select>
<span class="price" id="paynow">$0.00</span>
<span class="price" id="payfull">$0.00</span>

EDIT:jQuery代码

$(document).ready(function() {
  // For Calculator
  function Cost_Calculator() {
    var Currency = '$';
    var messageHTML = 'Please contact us for a price.';
    function CostFilter(e) {
      return e;
    }
    //Calculate function
    function calculate() {
      //Blank!
      var CalSaveInfo = [];
      $('#cost_calc_custom-data, #cost_calc_breakdown').html('');
      //Calculate total
      var calCost = 0;
      var calculate_class = '.cost_calc_calculate';
      $('.cost_calc_active').each(function() {
        //Calculation
        calCost = calCost + parseFloat($(this).data('value'));
        //Add to list
        var optionName = $(this).attr('value');
        var appendName = '<span class="cost_calc_breakdown_item">' + optionName + '</span>';
        var optionCost = $(this).attr('data-value');
        var appendCost = '<span class="cost_calc_breakdown_price">' + Currency + optionCost + '</span>';
        if (optionCost != "0") {
          var appendItem = '<li>' + appendName + appendCost + '</li>';
        }
        //hidden data
        var appendPush = ' d1 ' + optionName + ' d2 d3 ' + optionCost + ' d4 ';
        $('#cost_calc_breakdown').append(appendItem);
        CalSaveInfo.push(appendPush);
      });
      //Limit to 2 decimal places
      calCost = calCost.toFixed(2);
      //Hook on the cost
      calCost = CostFilter(calCost);
      var CustomData = '#cost_calc_custom-data';
      $.each(CalSaveInfo, function(i, v) {
        $(CustomData).append(v);
      });
      //Update price
      if (isNaN(calCost)) {
        $('#paynow').html(messageHTML);
        $('#payfull').html(messageHTML);
        $('.addons-box').hide();
      } else {
        $('#paynow').html(Currency + calCost);
        $('#payfull').html(Currency + calCost);
        $('.addons-box').show();
      }
    }
    //Calculate on click
    $('.cost_calc_calculate').click(function() {
      if ($(this).hasClass('single')) {
        //Add cost_calc_active class
        var row = $(this).data('row');
        //Add class to this only
        $('.cost_calc_calculate').filter(function() {
          return $(this).data('row') == row;
        }).removeClass('cost_calc_active');
        $(this).addClass('cost_calc_active');
      } else {
        // Remove class if clicked
        if ($(this).hasClass('cost_calc_active')) {
          $(this).removeClass('cost_calc_active');
        } else {
          $(this).addClass('cost_calc_active');
        }
      }
      //Select item
      var selectItem = $(this).data('select');
      var currentItem = $('.cost_calc_calculate[data-id="' + selectItem + '"]');
      var currentRow = currentItem.data('row');
      if (selectItem !== undefined) {
        if (!$('.cost_calc_calculate[data-row="' + currentRow + '"]').hasClass('cost_calc_active'))
          currentItem.addClass('cost_calc_active');
      }
      //Bring in totals & information
      $('#cost_calc_breakdown_container, #cost_calc_clear_calculation').fadeIn();
      $('.cost_calc_hide').hide();
      $('.cost_calc_calculate').each(function() {
        calculate();
      });
      return true;
    });
    $('#cost_calc_clear_calculation').click(function() {
      $('.cost_calc_active').removeClass('cost_calc_active');
      calculate();
      $('#cost_calc_breakdown').html('<p id="empty-breakdown">Nothing selected</p>');
      return true;
    });
  }
  //Run cost calculator
  Cost_Calculator();
});