SO - 18649575

by Arun P Johny

HTML

<div id="rm_clean" class="tab-pane fade in active">Areas:
    <br />
    <select name="rooms">
        <option value="" selected="selected">0</option>
        <option data-price="10" value='1'>I 10</option>
        <option data-price="20" value='2'>I 20</option>
    </select>
</div>
<div id="rm_deodorize" class="tab-pane fade">Deodorizer:
    <br />
    <select name="pr_deodorizer">
        <option value=''>0</option>
        <option data-price="25" value='1'>I 25</option>
        <option data-price="30" value='2'>I 30</option>
    </select>
</div>
<div id="rm_protectent" class="tab-pane fade">Protectant:
    <br />
    <select name="pr_protectant">
        <option value=''>0</option>
        <option data-price="50" value='1'>I 50</option>
        <option data-price="60" value='2'>I 60</option>
    </select>
</div>
<div id="rm_sanitizer" class="tab-pane fade">Sanitizer:
    <br />
    <select name="pr_sanitizer">
        <option value=''>0</option>
        <option data-price="100" value='1'>I 100</option>
        <option data-price="110" value='2'>I 110</option>
    </select>
</div>
<strong data-price="0">$</strong>
<ul id="selections">
</ul>

JavaScript

var $selections = $('#selections');
var $selects = $("select").change(function () {
    var total = 0;
    $selections.empty();
    $selects.each(function () {
        var $selected = $(this).find("option:selected");
        var price = parseFloat($selected.data("price")) || 0;
        total += price;
        if($selected.val() !== ''){
            $('<li />', {
                text: $selected.text() + ':' + $selected.val()
            }).appendTo($selections)
        }
    })
    $("strong").text('$ ' + total);
})