我想使用jquery根据下拉列表中的选定选项计算总价。我尝试了下面的代码，但它不起作用。请帮助我如何解决它。我提到了几个下拉菜单，选项很少。我编辑了这样的脚本。它可以工作，但是当我从下拉列表中更改选项时，它会计算较旧和较新的选项数据成本。我应该做些什么改变？
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#cost").html("18.99");
$("#CARVehicle").click(function () {
$("#frontplaterowcar").show();
$("#rearplaterowcar").show();
$("#trailerrowcar").show();
$("#rearplaterowmotor").hide();
$("#cost").html("18.99");
});
$("#BIKEVehicle").click(function () {
$("#frontplaterowcar").hide();
$("#rearplaterowcar").hide();
$("#trailerrowcar").hide();
$("#rearplaterowmotor").show();
$("#cost").html("22.99");
});
$("#frontplate").change(function () {
var frontplateCost = 0;
var frontplate = $("#frontplate");
frontplate.find(":selected").each(function (index, element) {
frontplateCost += $(this).data('cost');
var total = parseFloat($("#cost").val()) + parseFloat(frontplateCost);
$("#cost").val(total);
});
}).trigger('change');
$("#rearplate").change(function () {
var rearplateCost = 0;
var rearplate = $("#rearplate");
rearplate.find(":selected").each(function (index, element) {
rearplateCost += $(this).data('cost');
var total = parseFloat($("#cost").val()) + parseFloat(rearplateCost);
$("#cost").val(total);
});
}).trigger('change');
$("#trailer").change(function () {
var trailerCost = 0;
var trailer = $("#trailer");
trailer.find(":selected").each(function (index, element) {
trailerCost += $(this).data('cost');
var total = parseFloat($("#cost").val()) + parseFloat(trailerCost);
$("#cost").val(total);
});
}).trigger('change');
});
</script>
<form id="platecontroller" action="">
<table width="564" border="0" align="left" cellpadding="5" cellspacing="5"
style="margin-top: 5px" id="platebuilderbackground">
<tr>
<td width="164" align="right">Type of Vehicle:</td>
<td width="400" align="left">
<input type="radio" name="vehicle" value="CAR" id="CARVehicle" checked="checked"
/>CAR
<input type="radio" name="vehicle" value="BIKE"
id="BIKEVehicle" />MOTORBIKE</td>
</tr>
<tr>
<td width="164" align="right">Registration:</td>
<td width="400" align="left">
<input name="regno" type="text" id="regno" value="" size="9" maxlength="7"
style="text-transform: uppercase" />
</td>
</tr>
<tr id="frontplaterowcar">
<td align="right">Front Plate:</td>
<td align="left">
<select name="frontplate" id="frontplate" style="width:380px;">
<option value="00001~1" data-cost="40">Standard Front Number Plate (520mm x 111mm) (GBP 9.99)</option>
<option
value="00002~9" data-cost="30">305mm x 152mm (12''x6'') American Import (GBP 13.99)</option>
<option value="00003~19"
data-cost="20">343mm x 165mm (13" x 6") (GBP 16.99)</option>
<option value="00004~13"
data-cost="50">330mm x 165mm (13" x 6.5") (GBP 14.99)</option>
</select>
</td>
</tr>
<tr id="rearplaterowcar">
<td align="right">Rear Plate:</td>
<td align="left">
<select name="rearplate" id="rearplate" style="width:380px;">
<option value="00109~109" data-cost="40">Standard Rear Number Plate (520mm x 111mm) (GBP 9.99)</option>
<option
value="00110~110" data-cost="40">298mm x 216mm 4x4 Square (GBP 13.99)</option>
<option value="00110~201"
data-cost="40">Standard Square 284mm x 203mm (GBP 13.99)</option>
<option value="00111~111"
data-cost="40">305mm x 152mm (12"x6") American Import (GBP 13.99)</option>
<option value="00112~112"
data-cost="40">176mm 557mm Aston Martin DB 9 (GBP 31.99)</option>
<option value="00113~113"
data-cost="40">612mm x 186mm Aston Martin Vanquish (GBP 31.99)</option>
</select>
</td>
</tr>
<tr id="rearplaterowmotor" style="display:none;">
<td align="right">Rear Plate:</td>
<td align="left">
<select name="rearplatemotor" id="rearplatemotor" style="width:380px;">
<option value="00096~96" data-cost="40">9.5" x 6.5" Motorcycle (GBP 13.99)</option>
<option value="00097~97" data-cost="40">9" x 7" Motorcycle (GBP 14.99)</option>
</select>
</td>
</tr>
<tr id="trailerrowcar">
<td height="23" align="right">Extra Rear (for trailer):</td>
<td align="left">
<select name="trailer" id="trailer" style="width:380px;">
<option value='0' data-cost="40">No Trailer Plate</option>
<option value='1' data-cost="40">Standard Rear (520mm x 111mm) Plain (no badges etc)</option>
<option value='2'
data-cost="40">Standard Rear (520mm x 111mm) with your selected styling</option>
</select>
</td>
</tr>
</table>
</form>
<div id="pricedisp">Price:<span class="price">£<span id="cost">0.00</span></span>
<br
/><a href="#" onclick="buy();"><img src="images/BuyNow_Button.jpg" alt="buy number plates" width="177" height="61" border="0" /></a>
</div>