Question

我想根据下拉列表中使用jquery选择的选项来计算总价。我试过下面的代码但它不起作用。请帮我解决一下。我已经提到了几个选项很少的下拉菜单。我编辑了脚本像这样。它正在工作，但是当我从下拉列表中更改选项时，它会计算较旧的nd较新的选项数据成本。我应该做些什么改变？

<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 &nbsp;&nbsp;&nbsp;&nbsp;
                <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">&pound;<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>

Answer 1

用它来计算所选的总和：

var frontplateCost = 0;
frontplate.find(":selected").each(function(index, element) {
    frontplateCost += $(this).data('cost');
});

与其他人相似。

我想根据使用jquery从下拉列表中选择的选项计算总价

1 个答案: