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

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>

https://i.stack.imgur.com/zPdnK.png

Answer 1

您可以检查是否attr存在 on not inside 选项，因为您的第一个选项没有，attr这就是它给出的原因NaN，所以如果不存在，只需给出 value 0else attr value 。演示代码：var total = 0;$('select').change(function() {&nbsp; //get value from cpu slect box check if attr there else take value 0&nbsp; var cpu_price = $(".cpu").find('option:selected').attr('cpuprice') ? $(".cpu").find('option:selected').attr('cpuprice') : 0&nbsp; $('#cpuprice').val(cpu_price)&nbsp; //get value from gpu slect box check if attr there else take value 0&nbsp; var gpu_price = $(".gpu").find('option:selected').attr('gpuprice') ? $(".gpu").find('option:selected').attr('gpuprice') : 0&nbsp; $('#tpuprice').val(gpu_price)&nbsp; total = parseFloat(cpu_price) + parseFloat(gpu_price);&nbsp; $('.totalprice').text('₱' + total);})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table border=" 1">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Component</th>&nbsp; &nbsp; &nbsp; <th>Item Name</th>&nbsp; &nbsp; &nbsp; <th>Price </th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>CPU</td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <select class="cpu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>---select your CPU---</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option cpuprice="1222">Soemthing</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option cpuprice="1000">Soemthing1</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <output class="form-control prc" id="cpuprice" disabled value="" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </tbody>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>GPU</td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <select class="gpu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>---select your GPU---</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option gpuprice="1200">Somehingg</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option gpuprice="120">Somehingg1</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <output class="form-control prc" id="tpuprice" disabled value="" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table><span class="totalprice">Total: </span>