如何让jQuery自动计算和显示某些表单值的总和？

（我对jQuery还相当陌生。）

我有一个传统的HTML表单，有3个下拉选择选项（每个选项都有不同的值，我想在其中加总）。现在，我使用的是一个jQuery代码（如下），它将“os0，os1，os2”相乘，然后在“result”css块中很好地显示总成本，但它需要用户单击“Calculate total”按钮

有没有办法让jQuery自动更新这个总数？没有“计算总数”按钮？ 任何形式的帮助都将不胜感激

谢谢，

---

Aaron

我建议在3个下拉列表中附加一个jquery事件监听器，以便在更改任何一个下拉列表时，重新计算总值。您可以选择等待，直到所有三个都有值，或者只是“随人们去”。

由于您已经有了计算，请将逻辑移到单独的函数中，然后将其绑定到每个选择的更改事件：

试试这个：

function calculateTotal(){
   var unitPrice = 2, paperTypes = 2, printedSides = 2;
    var inputNum_of_Shirts = $('#os0').val();
    var inputNum_of_FColor = $('#os1').val();
    var inputNum_of_BColor = $('#os2').val();
    var totalCost = (inputNum_of_Shirts*parseFloat(unitPrice))
        *(parseFloat(paperTypes)*inputNum_of_FColor)
        *(parseFloat(printedSides)* inputNum_of_BColor );
    var perShirtCost = (parseFloat(unitPrice))
        *(parseFloat(paperTypes)*inputNum_of_FColor)
        *(parseFloat(printedSides)*inputNum_of_BColor);

    $('#total').html(formatCurrency(totalCost));
    $('#perShirt').html(formatCurrency(perShirtCost));
    $('#result').css('display', 'block');
    document.getElementById("finalpaypal").value = totalCost;
}

   $(function(){
     $('#os0, #os1, #os2').change(calculateTotal);
   }); 

---

非常感谢您的帮助，我似乎在实现HTML以实际显示更新的值时遇到了问题，以下是我的代码Total:您能发布完整的HTML（os0-1）和formatCurrency etc@jsfiddle.net吗？

function calculateTotal(){
   var unitPrice = 2, paperTypes = 2, printedSides = 2;
    var inputNum_of_Shirts = $('#os0').val();
    var inputNum_of_FColor = $('#os1').val();
    var inputNum_of_BColor = $('#os2').val();
    var totalCost = (inputNum_of_Shirts*parseFloat(unitPrice))
        *(parseFloat(paperTypes)*inputNum_of_FColor)
        *(parseFloat(printedSides)* inputNum_of_BColor );
    var perShirtCost = (parseFloat(unitPrice))
        *(parseFloat(paperTypes)*inputNum_of_FColor)
        *(parseFloat(printedSides)*inputNum_of_BColor);

    $('#total').html(formatCurrency(totalCost));
    $('#perShirt').html(formatCurrency(perShirtCost));
    $('#result').css('display', 'block');
    document.getElementById("finalpaypal").value = totalCost;
}

   $(function(){
     $('#os0, #os1, #os2').change(calculateTotal);
   });