データの属性を計算し、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>属性の合計を1つの合計にする方法私の現在のコードでは、最後に変更されたオプションのみが出力されます。

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

この選択のいずれかが変更されるたびにも火をそれだけで、あなただけの変更1の価格を与える：これを試してみてください。あなたは、常にこの

$(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