更改选择框时计算价格变化

Question

I'm sure this as been ask before but I am unable to find an answer.

What i'm trying to do:

• Update a price field <p class="price">&pound;<span>50.00</span></p> when a user changes a select box
• Have multiple select boxes that work together on updating the price correctly
• reset the price if all select boxes are at original values

NOTE: I am not very flexible with changing the HTML layout.

Heres what I have so far:

HTML

<p class="price">&pound;<span>50.00</span></p>

<select name="s1">
    <option value="1" data-price="0">Item 1</option>
    <option value="2" data-price="10.10">Item 2 + &pound;10.10</option>
    <option value="3" data-price="20.10">Item 3 + &pound;20.10</option>
    <option value="4" data-price="30.10">Item 4 + &pound;30.10</option>
</select>

<select name="s2">
    <option value="1" data-price="0">Item 1</option>
    <option value="2" data-price="10.10">Item 2 + &pound;10.10</option>
    <option value="3" data-price="20.10">Item 3 + &pound;20.10</option>
    <option value="4" data-price="30.10">Item 4 + &pound;30.10</option>
</select>

JQuery

var price = $('.price span').text();
$('.price').attr({'data-current': price, 'data-price': price})

$('select').change(function(){
    var $price = $('.price span');
    //var originPrice = parseFloat($('.price').attr('data-price'));
    var currentPrice = parseFloat($('.price').attr('data-current'));
    var addPrice = parseFloat($(this).children('option[value='+$(this).val()+']').attr('data-price'));
    var newPrice = '';

    if(isNaN(addPrice) || addPrice == 0){
        //reset
        var reset = $('.price').attr('data-price');
        $price.text(reset)
        $('.price').attr('data-current', reset)
    } 
    else {
        newPrice = currentPrice + addPrice;
        $price.text(parseFloat(newPrice).toFixed(2))
        $('.price').attr('data-current', newPrice)
    }

});

Its looking quite messy at the moment, I have created this as a test from the default Eshop (Wordpress) product page layout. Eshop displays the price and select boxes similar to:

<option value="2" data-price="10.10">Item 2 + &pound;10.10</option>

I have added all data values, currently my example is not full working as select boxes override each other and i'm not sure how to fix it. And ideas?

Here is the JsFiddle

Thanks.

Answer 1

Assuming I've understood the question correctly, you want to add the values selected in the select elements to the initial price. If that's the case you can massively simplify your code. Try this:

$('.price-option').change(function(){
    var price = parseFloat($('.price').data('base-price'));

    $('.price-option').each(function(i, el) {
        price += parseFloat($('option:selected', el).data('price'));
    });

    $('.price span').text(price.toFixed(2));
}); 

Example fiddle