Store with updating total from <select> tags

A basic store layout with a product's base price and various upgrades one can purchase. Option values allow passing product ID and cost. Upgrade total and final total update automatically with the onchange event of the <select> tags.

by Snowsickle

HTML

<p>Computer base price: $<span id="baseCost"></span></p>
<br>
<p>Select your upgrades:</p>
<form id="options">
    <select name="processor" onchange="calculateTotals()">
        <option value="Base_0">Base processor ($0)</option>
        <option value="Processor1_100">Processor 1 ($100)</option>
        <option value="Processor2_500">Processor 2 ($500)</option>
    </select><br>
    <select name="hard-drive" onchange="calculateTotals()">
        <option value="Base_0">Base hard-drive ($0)</option>
        <option value="7200rpm_250">7200rpm hard-drive ($250)</option>
    </select><br>
</form>
<br>
<p>Upgrade total: $<span id="upgradeCost">0</span></p><br>
<p>Final total: $<span id="sumTotal"></span></p>

JavaScript

$(document).ready(function(){
    var basePrice = 1000;
    $("#baseCost").text(basePrice);
    $("#sumTotal").text(basePrice);
});

function calculateTotals(){
    var basePrice = parseInt($("#baseCost").text(), 10);
    var upgradePrice = 0;
    $("#options select").each(function(){
        var optionVal = $(this).val();
        upgradePrice += parseInt(optionVal.substr(optionVal.indexOf("_") + 1, optionVal.length - 1), 10);
    });
    $("#upgradeCost").text(upgradePrice);
    $("#sumTotal").text(basePrice + upgradePrice);
}