javascript - 添加起始价格和附加价格

Question

我有一个包含起始价格的 div 和一个包含不同选项的选择下拉列表。我希望起始价格根据下拉选择发生变化。

<div id="price">$50.00</div>

<select>
    <option value="1">Option 1 (+$50.00)</option>
    <option value="2">Option 2 (+$100.00)</option>
    <option value="3">Option 3 (+$150.00)</option>
    <option value="4">Option 4 (+$200.00)</option>
</select>

我正在使用这段代码，但它不起作用

$('select').change(function() {
    var total = 0;

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

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

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

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

不太确定发生了什么

Answer 1

我建议将您的数据重新配置为在表示之外，并在您的元素上添加一个属性。

<div id="price" data-price="50.00">$50.00</div>

<select>
    <option value="1" data-price="50.00">Option 1 (+$50.00)</option>
    <option value="3" data-price="100.00">Option 2 (+$100.00)</option>
    <option value="4" data-price="150.00">Option  (+$150.00)</option>
    <option value="5" data-price="200.00">Option 4 (+$200.00)</option>
</select>


Total: <div id="finalPrice">$50.00</div>

对于您的脚本:

$('select').change(function() {
    var total = $("#price").data("price")*1;

    $('select option:selected').each(function() {
        total += $(this).data("price")*1;
    });

    $('#finalPrice').text('$' + total.toFixed(2));
});

Requisite Fiddle

此外，听起来您希望在列出的价格之上有一个“最终价格”，因此我创建了一个额外的 div 来保存该值。如果您想重复使用相同的“价格”，只需将 $('#finalPrice') 选项替换为 $('#price') 即可随心所欲。