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

Question

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

在您想要的任何更改或单击处理程序中，您可以使用 jQueryeach来获取和汇总所有值：

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

这是一个演示 jsFiddle。