JQuery从选定的下拉列表中获取选定的值并添加到总计

时间:2012-07-05 19:30:32

标签: jquery jquery-selectors

我将如何开始,我想选择每个所选的“[]”中的值并将其添加到#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>

1 个答案:

答案 0 :(得分:2)

在您想要的任何更改或单击处理程序中,您可以使用jQuery的each来获取并汇总所有值:

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.