jquery로 총 가격을 어떻게 동적으로 갱신합니까?

Question

나는 이것을 매우 편리하게 사용하고있다. 나는 jQuery와 선택 상자를 사용하여 제품의 총 가격을 계산하려고 노력하고있다. jsFiddle.

그러나 'black widow'의 두 번째 선택 옵션을 선택하면 첫 번째 선택 상자에서 선택한 항목에 따라 데이터 값이 업데이트됩니다.

데이터 값 (x 12 캐비닛이 선택된 경우) 100 (1x12 캐비닛 선택)
데이터 값 200 (2x12 캐비닛 선택)
데이터 값

이것은 400 임 모두 올바르게 업데이트 (크롬 인스펙트에서 확인하고 데이터 값이 업데이트 중임) 한 번 블랙 위도우 옵션을 한 번 선택하면 총 가격이 동적으로 업데이트되지 않습니다.

아무도 이유를 분명히 할 수 있습니까? 옵션이 변경 될 때마다 updateTotal 변수를 다시로드하는 방법이 있습니까? 나는 이것이 이것이하고있는 일이라고 추측했지만 분명히는 아니었다.

여기에 내 JS :

//Calculate Total Price 
    $("select[name='options']").change(function() { 
     updateTotal(); 
    }); 

//Function for price calculator 
function updateTotal() { 
    var newTotal = 0; 
    $("select[name='options'] option:selected").each(function() { 
     newTotal += parseFloat($(this).data('value')); 
    }); 
    $(".total").text(newTotal); 
} 

감사합니다!

Answer 1

변경이 : 여기에

$(".widow").attr('data-value', price[$(this).val()]); 

:

$(".widow").data('value', price[$(this).val()]); 

가 updated Fiddle