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

<强> jsFiddle Demo

只需将值保存在选项value属性中即可。更简单！

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

和Javascript。我们只需获取原始值，删除$符号。并从下拉菜单中将其添加到this.value。

$('select').change(function() {
    var originalPrice = parseFloat( $('#price').text().replace('$', '') );
    var total = parseFloat(this.value) + originalPrice;

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

Answer 2

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

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

<div id="finalPrice"></div>

的.js：

$('select').change(function() {
    var total = parseFloat($('#price').data('value'));

    $('select option:selected').each(function() {
        var m = parseFloat($(this).data('value'));

        if(m !== null) {
            total += m;
        }
    });
    $('#finalPrice').data('value', total.toFixed(2));
    $('#finalPrice').text('$' + total.toFixed(2));
});

现在，可以理解的是，如果您使用非0小数位，这会变得更复杂。

编辑：这是一个工作小提琴：http://jsfiddle.net/remus/ACnsp/

Answer 3

我建议将数据重新配置为演示文稿之外的元素以及元素的属性。

<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')，它就可以根据需要运行。

添加起始价格并添加价格

3 个答案: