计算数据属性并输出到HTML

Question

我想要计算所有<select>数据属性，并将总数输出到<span>中。

以下是选择：

<select name="product-1" id="product-1">
    <option value="0" data-price="0">0 (0.00$)</option>
    <option value="10" data-price="52.39">10 (52.39$)</option>
    <option value="20" data-price="61.93">20 (61.93$)</option>
</select>
<select name="product-2" id="product-2">
    <option value="0" data-price="0">0 (0.00$)</option>
    <option value="10" data-price="57.92">10 (57.92$)</option>
    <option value="20" data-price="77.81">20 (77.81$)</option>
</select>
<select name="product-3" id="product-3">
    <option value="0" data-price="0">0 (0.00$)</option>
    <option value="10" data-price="64.63">10 (64.63$)</option>
    <option value="20" data-price="84.07">20 (84.07$)</option>
</select>

以下是跨度：

<span id="total">4.99</span>

下面是jQuery：

    $(document).ready(function() {
        delivery = 4.99, $("select").change(function() {
            total = $(this).find("option:selected").data("price") + delivery, $("#total").html(total.toFixed(2))
        })
    });

问题:我不知道如何将所有的<select>属性加起来。在我当前的代码中，它只输出最后更改过的选项。

Answer 1

最简单的方法是在值发生更改时遍历每个select的选定选项，并保留选定价格的运行合计。试试这个：

​

$(document).ready(function() {
  var delivery = 4.99;

  $("select").change(function() {
    var total = delivery;
    $('select option:selected').each(function() {
      total += parseFloat($(this).data('price'));
    });
    $("#total").html(total.toFixed(2))
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="product-1" id="product-1">
  <option value="0" data-price="0">0 (0.00$)</option>
  <option value="10" data-price="52.39">10 (52.39$)</option>
  <option value="20" data-price="61.93">20 (61.93$)</option>
</select>
<select name="product-2" id="product-2">
  <option value="0" data-price="0">0 (0.00$)</option>
  <option value="10" data-price="57.92">10 (57.92$)</option>
  <option value="20" data-price="77.81">20 (77.81$)</option>
</select>
<select name="product-3" id="product-3">
  <option value="0" data-price="0">0 (0.00$)</option>
  <option value="10" data-price="64.63">10 (64.63$)</option>
  <option value="20" data-price="84.07">20 (84.07$)</option>
</select>


<span id="total">4.99</span>

​

Answer 2

每当更改任何选择时，even都会触发，但它只会给出您刚刚更改的选择的价格。由于您总是想要所有3个元素的总和，请尝试使用以下命令

$(document).ready(function() {
    delivery = 4.99, $("select").change(function() {
        total = delivery;
        $("select.product").each(function(){
            total+=$(this).find("option:selected").data("price");
        });
        $("#total").html(total.toFixed(2))
    })
});

JSFiddle