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

如何为多个选择添加？

3 个答案:

HTML：

Javascript（jQuery）：