2

我有一个带有起始价格的 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);
});

不完全确定发生了什么

4

3 回答 3

0

jsFiddle 演示

只需将值保存在选项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));
});
于 2013-10-23T19:20:15.883 回答
0

我建议将您的数据重新配置为不在演示文稿和元素上的属性。 

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

必备的小提琴

此外，听起来您希望在列出的价格之上有一个“最终价格”，所以我创建了一个额外的 div 来保存该值。如果您想重复使用相同的“价格”，您可以简单地将$('#finalPrice')选择替换为$('#price')，它将按需要运行。

于 2013-10-23T19:26:45.787 回答
0 
<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/

于 2013-10-23T19:23:27.413 回答