데이터 속성 계산 및 HTML로 출력

Question

모든 <select> 데이터 속성을 계산하고 합계를 <span>으로 출력하고 싶습니다. 그것을 알 수 : JQuery와 여기

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

된다 :

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

문제 여기

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

스팬이다 : 여기

가 선택되어모든 속성을 하나의 합계로 합하는 방법. 현재 코드에서는 마지막으로 변경된 옵션 만 출력됩니다.

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

이것을 선택 중 하나가 변경 될 때마다, 심지어 불을하지만, 그것은 단지 당신이 방금 변경 한 하나의 가격을 줄 것이다 :이보십시오. 당신이 ('선택 옵션을')이

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