如何汇总从数据库中检索到的下拉列表中选择的商品的价格

Question

在下拉列表中选择一个项目后，我试图对价格求和，但它只显示 NaN。 下拉列表的值是从 MySQL 数据库中检索的

<?php
    //database connection here
?>
    <table border=" 1">

        <thead>
            <tr>
                <th>Component</th>
                <th>Item Name</th>
                <th>Price </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>CPU</td>
                <td>
                    <?php
                    //Retrieving CPU table
                    $query = $conn->query("SELECT * FROM cpu");
                    echo '<select  onChange = parseFloat($("#cpuprice").val($(this).find("option:selected").attr("cpuprice")))>';
                    echo "<option>---select your CPU---</option>";
                    while ($obj = $query->fetch_object()) {
                        echo '<option cpuprice = "' . $obj->price . '" >' . $obj->cpuname . '</option>';
                    }
                    echo '</select>';
                    ?>
                </td>
                <td>
                    <output class="form-control prc" id="cpuprice" disabled value="">
                </td>
            </tr>
        </tbody>

        <tbody>
            <tr>
                <td>GPU</td>
                <td>
                    <?php
                    //Retrieving GPU table
                    $query = $conn->query("SELECT * FROM gpu");
                    echo '<select  onChange = parseFloat($("#tpuprice").val($(this).find("option:selected").attr("gpuprice")))>';
                    echo "<option>---select your GPU---</option>";
                    while ($obj = $query->fetch_object()) {
                        echo '<option  gpuprice = "' . $obj->price . '" >' . $obj->gpuname . '</option>';
                    }
                    echo '</select>';
                    ?>
                </td>
                <td>
                    <output class="form-control prc" id="tpuprice" disabled value="">
                </td>
            </tr>
        </tbody>
    </table>

这是我使用的 jQuery 我不知道这是否正确，但我到处搜索，NaN 是迄今为止我得到的最佳结果，对不起，我刚开始使用 JavaScript 或 ZF590B4FDA2C30BE28DD3C8C3CAF57

<span class="totalprice">Total: </span>

    <script>
        var total = 0;
            $('select').change(function() {
            var cpu = ($('#totalprice').val($(this).find('option:selected').attr('cpuprice')))
            var gpu = ($('#Totalprice').val($(this).find('option:selected').attr('gpuprice')))
            total = parseFloat(cpu) + parseFloat(gpu);
            $('.totalprice').text('₱' + total);
            })
    </script>

这是图片，选择它只是 NaN 后：

Answer 1

您可以检查attr是否存在于 not inside 选项上，因为您的第一个选项没有attr这就是它给出NaN的原因，因此如果不存在则只给出值0否则 attr 值。

演示代码：

 var total = 0; $('select').change(function() { //get value from cpu slect box check if attr there else take value 0 var cpu_price = $(".cpu").find('option:selected').attr('cpuprice')? $(".cpu").find('option:selected').attr('cpuprice'): 0 $('#cpuprice').val(cpu_price) //get value from gpu slect box check if attr there else take value 0 var gpu_price = $(".gpu").find('option:selected').attr('gpuprice')? $(".gpu").find('option:selected').attr('gpuprice'): 0 $('#tpuprice').val(gpu_price) total = parseFloat(cpu_price) + parseFloat(gpu_price); $('.totalprice').text('₱' + total); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border=" 1"> <thead> <tr> <th>Component</th> <th>Item Name</th> <th>Price </th> </tr> </thead> <tbody> <tr> <td>CPU</td> <td> <select class="cpu"> <option>---select your CPU---</option> <option cpuprice="1222">Soemthing</option> <option cpuprice="1000">Soemthing1</option> </select> </td> <td> <output class="form-control prc" id="cpuprice" disabled value="" /> </td> </tr> </tbody> <tbody> <tr> <td>GPU</td> <td> <select class="gpu"> <option>---select your GPU---</option> <option gpuprice="1200">Somehingg</option> <option gpuprice="120">Somehingg1</option> </select> </td> <td> <output class="form-control prc" id="tpuprice" disabled value="" /> </td> </tr> </tbody> </table> <span class="totalprice">Total: </span>