jquery - 如何为多选做加法？

Question

我想使用 2 个选择来更改总价的值。

<span id="totalprice">$10</span>

<select id="upgrade1">
    <option value="10">A</option>
    <option value="20">B</option>
</select>
<select id="upgrade2">
    <option value="10">C</option>
    <option value="20">D</option>
</select>

因此，例如选择 B 和 D，总价将反映 40 美元。

这是我到目前为止的 jQuery，但我不知道添加部分是什么......

$('#upgrade1, #upgrade2').on('change', function() {
    $('#totalprice').text($(this).val());
});

我如何做 jQuery 添加部分？

Answer 1

您的下拉元素缺少结束标记 ( </select>)。请参阅下面的代码，并使用此 jsFiddle 来查看它的实际效果。http://jsfiddle.net/3eVc6/

HTML：

<span id="totalprice">$10</span>

<select id="upgrade1">
    <option value="10">A</option>
    <option value="20">B</option>
</select>
<select id="upgrade2">
    <option value="10">C</option>
    <option value="20">D</option>
</select>

JavaScript（包括 jQuery 库）

$('#upgrade1, #upgrade2').on('change', function () {
    sum = Number($('#upgrade1').val()) + Number($('#upgrade2').val());
    $('#totalprice').html('$' + sum);
});

感谢@Blazemonger 指出这parseInt(val)可能会导致解析问题（因为未指定基数）。我已将其替换为Number()

Answer 2

HTML：

一些小的更正 - 关闭选择语句

<span id="totalprice">30</span>

<select id="upgrade1">
    <option value="10">A</option>
    <option value="20">B</option>
</select>
<select id="upgrade2">
    <option value="10">C</option>
    <option value="20">D</option>
</select>

Javascript（jQuery）：

获取每个必填字段的值，通过parseInt转换为数字，并将它们相加

$('#upgrade1, #upgrade2').on('change', function() {
  $('#totalprice').text("$"+parseInt($('#upgrade1').val())+parseInt($('#upgrade2').val()));
});

Answer 3

你已经很接近了。

$('#upgrade1,#upgrade2').on('change', function() {
    $('#totalprice').text("$" + (parseInt($('#upgrade1').val(),10) +
                                 parseInt($('#upgrade2').val(),10)) );
});