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); 
});