Javascript JS-根据span/div字段计算价格

我有一个表单，用户可以在几个下拉字段中选择不同的选项。根据用户选择，值将显示在下拉字段旁边的范围字段中

现在，我想计算span字段中的所有值，以便在提交表单之前在表单末尾显示总数

这是我表格的一部分：

<form name='formname_form' action='./index.php' method='post' class='formname-form' id='formname-form'>
<div class="row" id='save_prices'>
    <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1 col-sm-12">
        <div class="form-inline">
            <label class="form-icon">
                <figure>
                    <img src="../assets/images/symbol-1.png" alt="/">
                </figure>
            </label>
            <div class="form-group">
                <select name="field_a" id="field_a" onchange="CalcDiscount()">
                    <option value="0,00">Option A?</option>
                    <option value="6,17">Yes</option>
                    <option value="0,00">No</option>
                </select>
            </div>
            <div class="amount-wrap-3">
                <span>&euro; <span id='field_a_price' class='prices'></span></span>
            </div>
        </div>
        <div class="form-inline">
            <label class="form-icon">
                <figure>
                    <img src="../assets/images/symbol-2.png" alt="/">
                </figure>
            </label>
            <div class="form-group">
                <select name="field_b" id="field_b" onchange="CalcDiscount()">
                    <option value="0,00">Option B</option>
                    <option value="17,50">Yes</option>
                    <option value="0,00">No</option>
                </select>
            </div>
            <div class="amount-wrap-3">
                <span>&euro; <span id='field_b_price' class='prices'></span></span>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1 col-sm-12">
        <div class="total-amount">
            Total Price
            <div class='price'><span id='total_price' class="total_price"></span> &euro;</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-6 col-xs-12">
        <div class="form-inline">
            <input name='submit' type='submit' id='submit' value='Save' class='btn btn-form-indiv'/>
        </div>
    </div>
</div>
</form>

下面是我的javascript部分：

<script>
    // Get references to the objects you need (<select> and <span>)
    var field_a = document.getElementById('field_a');
    var field_a_price = document.getElementById('field_a_price');

    var field_b = document.getElementById('field_b');
    var field_b_price = document.getElementById('field_b_price');

    // When the list value changes, set the innerHTML of the <span>
    field_a.onchange = function() {
        field_a_price.innerHTML = this.value;
    };

    field_b.onchange = function() {
        field_b_price.innerHTML = this.value;
    };

    var priceList = $('#save_prices').find('.prices');
    var totalPrice = 0;

    $.each(priceList, function(i, price){
        totalPrice += parseInt($(price).text())
    });

    $('.total_price').text(totalPrice);

</script>

有人知道我做错了什么吗？类总价在我的范围内的值始终保持为0。我假设这与我正在使用的onChange方法有关？

问题

两个选择框中的总计未显示在总价区域中

解决方案

创建一个函数，并在选择框中选择新值时调用该函数以触发onchange事件

范例

总结

考虑到这些值有逗号，我不确定您打算如何处理它们

为了直接解决您的问题，在运行代码时，值始终为空的原因是因为所有代码都只在页面加载时运行。更改选择框值时，仅运行onchange中的代码。通过添加每次选择时调用的函数，我们可以从JQuery返回的类列表中填充数组

  // Get references to the objects you need (<select> and <span>)
    var field_a = document.getElementById('field_a');
    var field_a_price = document.getElementById('field_a_price');

    var field_b = document.getElementById('field_b');
    var field_b_price = document.getElementById('field_b_price');

    // When the list value changes, set the innerHTML of the <span>
    field_a.onchange = function() {
        field_a_price.innerHTML = this.value;
        // Calling new function
        updateTotal();
    };

    field_b.onchange = function() {
        field_b_price.innerHTML = this.value;
        // Calling new function
        updateTotal();
    };

  // New function
  function updateTotal() {
    var p = $('.prices').map(function () { return $(this).text(); }).get();
    var totalPrice = 0;
    $.each(p, function( index, value ) {
      totalPrice = totalPrice + value;
      $('.total_price').text(totalPrice);
    });
  }