How to do addition for multiple selects?

Question

I would like to use 2 selects to change the value of the total price.

<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>

So for example selecting B and D the total price would reflect $40.

This is my jQuery I have so far, but I do not know what goes into the addition part...

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

How do I do the jQuery addition part?

Aaron Blenkush · Accepted Answer · 2013-02-28T20:23:42.253

1

You were missing closing tags (</select>) on your dropdown elements. See the code below, and use this jsFiddle to see it in action. 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 (include jQuery library)

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

Thanks to @Blazemonger for pointing out that parseInt(val) could possibly lead to parsing issues (since the radix is not specified). I've replaced it with Number()

edited Feb 28 '13 at 20:23

answered Feb 28 '13 at 19:17

Aaron Blenkush

3,034
2
28
54

[Always, always, always use a radix with parseInt.](http://stackoverflow.com/questions/850341/how-do-i-work-around-javascripts-parseint-octal-behavior) – Blazemonger Feb 28 '13 at 20:16
@Blazemonger: You're right. Number() would be a better option because it avoids the parsing issues, and can return a floating point number (which may be preferable in the OP's example, since he's dealing with price). – Aaron Blenkush Feb 28 '13 at 20:21

Billy Moon · Answer 2 · 2013-02-28T19:46:41.597

0

HTML:

Some small corrections - closing select statements

<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):

Get the value of each required field, passing through parseInt to convert to number, and add them together

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

edited Feb 28 '13 at 19:46

answered Feb 28 '13 at 19:15

Billy Moon

57,113
24
136
237

Always use a radix with parseInt. – Blazemonger Feb 28 '13 at 19:24
You forgot to add the $ sign. Thanks for helping. – Elijah Yang Feb 28 '13 at 19:42
@Blazemonger why is it necessary, when it defaults to base 10. Is there any problem with using the default base? – Billy Moon Feb 28 '13 at 19:46
[If given certain strings, parseInt may default to base eight instead.](http://stackoverflow.com/questions/5600366/why-does-the-radix-for-javascripts-parseint-default-to-8) – Blazemonger Feb 28 '13 at 20:16
@Blazemonger Wow - that is surprising! Thanks for the tip. – Billy Moon Feb 28 '13 at 20:28

score 0 · Answer 3 · edited Feb 28 '13 at 20:14

0

You are very close already.

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

edited Feb 28 '13 at 20:14

Blazemonger

90,923
26
142
180

answered Feb 28 '13 at 19:15

windywindy

66
2

This doesn't work. The "$" + changes the numbers back to strings and you get $1010 instead of $20. – Elijah Yang Feb 28 '13 at 19:41
Added another set of parentheses to take care of the numerical addition. – Blazemonger Feb 28 '13 at 20:14

How to do addition for multiple selects?

3 Answers3

HTML:

Javascript (jQuery):