jquery : 새 옵션을 선택할 때마다 여러 선택 메뉴에서 값을 가져옵니다.

Question

일련의 선택 메뉴를 사용하여 jQuery로 실시간 가격 견적 양식을 작성하고 있습니다.

$(document).ready(function(){ 
$('select > option:selected').each(function() { 
    var value = $(this).attr('label'); 

    total = parseFloat(total) + parseFloat(value); 
    total = total.toFixed(2); 
}); 
printTotal(total); // prints the total price 
}); 

유일한 문제는 그이 유일한 작품은 페이지가로드 될 때이다 : 나는 각 선택 메뉴에서 기본값을 잡고 함께 추가 아래 코드로 왔어요. 모든 선택 메뉴에서 새 값을 선택할 때마다 가격이 업데이트되고 싶습니다 (6 개가 있습니다).

난 ("선택") $을 추가하는 시도. (함수()을 변경 {...} example code here 참조)하지만, 그 선택 메뉴의 각각에 대한 모든 값을 추가로 트리거 (함께 (즉, 총 그것이 있어야 무엇을 6 배입니다)

내가 문서를 검색했지만 사용할 경우 알 수없는 누군가가 도와 드릴까요

HTML 샘플 도움이된다면 :..?

<select id="colors"> 
<option label="25.00" value="XYZ">1 color</option> 
<option label="50.50" value="ABC">2 colors</option> 
<option label="75.75" value="MNO">3 colors</option> 
</select> 

Answer 1

매트, 나는 생각했기 때문에 당신이 내 마음 속에서 뭔가를 촉발 시켰다고 생각합니다. 적어도, 그것은 지금까지 작동합니다.

$(document).ready(function(){ 
    $('select').change(function() { 
     var total = 0; 
     $('select > option:selected').each(function() { 
      var value = $(this).attr('label'); 

      total = parseFloat(total) + parseFloat(value); 
      total = total.toFixed(2); 
     }); 
     printTotal(total); 
    }); 
}); 

그것은 새로운 선택이 될 때마다 재설정해야하는 var에 총 = 0 조각의 위치로 내려왔다 : 여기

그것을 수행하는 코드이다.

Answer 2

내에서 테스트 할 때전화를 걸었을 때 클릭 한 select 요소의 컨텍스트 내에서 option을 검색해야합니다.

$('select').change(function() { 
    var total = 0; 

    // note the second parameter passed to the $() function below 
    $('option:selected', $(this)).each(function() { 
     var value = $(this).attr('label'); 
     total += parseFloat(value).toFixed(2); 
    }); 
    printTotal(total); 
});