Question

How would I begin, I would like to select the value enclosed in “[]” of each of the selected and add it to #theFinalPrice?

<div ID="theFinalPrice">$20.00</div>

<p>Hotel:<br />
<select name="variation1" class="eStore_variation">
<option value="King Bed [+ $50.00]">King Bed</option>
<option value="Double Bed">Double Bed</option>
</select></p>

<p>Add a Guest:<br />
<select name="variation2" class="eStore_variation">
<option value="no added guests">no added guests</option>
<option value="+1 guest [+ $35.00]">+1 guest [+ $35.00]</option>
</select></p>

<p>Additional Fun:<br />
<select name="variation3" class="eStore_variation">
<option value="no additional fun">no additional fun</option>
<option value="1 game of golf [+ $35.00]">+1 game of golf [+ $35.00]</option>
</select></p>

Answer 1

In whatever change or click handler you’d like, you can use jQuery’s each to get and sum all the values:

var total = 0; // Set to some base price

$('.eStore_variation option:selected').each(function() {
    var m = /\[\+ \$(\d+\.\d+)\]/.exec(this.value);

    if(m !== null) {
        total += +m[1];
    }
});

var decimalPart = (total - Math.floor(total)) * 100;

$('#theFinalPrice').text('$' + Math.floor(total) + '.' + (decimalPart < 10 ? '0' : '') + decimalPart);

Here’s a demo jsFiddle.