PHP+MySQL下拉框选品后价格求和显示NaN的技术求助

我来帮你梳理下代码里的问题，这些都是新手常踩的坑，咱们一步步修正：

核心错误分析 #

1. 赋值操作被当成取值使用
   你这段代码里：

   var cpu = ($('#totalprice').val($(this).find('option:selected').attr('cpuprice')))
   

   $('#totalprice').val(...)是给元素赋值的操作，它返回的是jQuery对象，不是你要的价格数值，直接parseFloat这个对象肯定会得到NaN。

2. 元素ID写错且不存在
   你的HTML里CPU的价格输出框ID是cpuprice，GPU的输出框ID还写错成了tpuprice（应该是gpuprice），但你JS里用了#totalprice和#Totalprice，这些元素根本不存在，自然取不到值。

3. 未区分不同下拉框的属性
   不管是CPU还是GPU的下拉框触发change事件，你都同时去取cpuprice和gpuprice属性，但GPU的option里只有gpuprice，没有cpuprice，反过来也一样，所以总有一个属性是undefined，parseFloat后就是NaN。

4. 自定义属性不符合HTML规范
   直接用cpuprice这种自定义属性不符合标准，应该用data-*前缀的属性，比如data-price，这样更规范，也方便jQuery用data()方法取值。

5. HTML标签未闭合
   你的<output>标签都没有闭合，这会导致DOM结构异常，影响元素选取。

修正后的完整代码 #

HTML/PHP部分 #

<?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");
// 改用data-price属性，change事件统一调用计算函数
echo '<select class="component-select" data-type="cpu">';
echo "<option>---select your CPU---</option>";
while ($obj = $query->fetch_object()) {
echo '<option data-price="' . $obj->price . '" >' . $obj->cpuname . '</option>';
}
echo '</select>';
?>
</td>
<td>
<output class="form-control prc" id="cpuprice" disabled value=""></output>
</td>
</tr>
<tr>
<td>GPU</td>
<td>
<?php //Retrieving GPU table
$query = $conn->query("SELECT * FROM gpu");
echo '<select class="component-select" data-type="gpu">';
echo "<option>---select your GPU---</option>";
while ($obj = $query->fetch_object()) {
echo '<option data-price="' . $obj->price . '" >' . $obj->gpuname . '</option>';
}
echo '</select>';
?>
</td>
<td>
<output class="form-control prc" id="gpuprice" disabled value=""></output>
</td>
</tr>
</tbody>
</table>

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

jQuery部分 #

<script>
// 定义计算总价的函数，每次下拉框变化都调用它
function calculateTotal() {
    // 获取CPU选中的价格，没选中就取0
    var cpuPrice = parseFloat($('select[data-type="cpu"] option:selected').data('price')) || 0;
    // 获取GPU选中的价格，没选中就取0
    var gpuPrice = parseFloat($('select[data-type="gpu"] option:selected').data('price')) || 0;
    
    // 更新对应的价格输出框
    $('#cpuprice').val(cpuPrice);
    $('#gpuprice').val(gpuPrice);
    
    // 计算总价并更新显示
    var total = cpuPrice + gpuPrice;
    $('.totalprice').text('Total: ₱' + total);
}

// 给所有下拉框绑定change事件，触发计算
$('.component-select').change(calculateTotal);
</script>

修正后的亮点 #

• 用data-type区分CPU和GPU的下拉框，避免属性混淆
• 用data-price规范自定义属性，取值更可靠
• 把计算逻辑封装成独立函数，代码更清晰，也方便后续扩展（比如加内存、主板等组件）
• 用|| 0处理未选中的情况，确保不会出现NaN
• 修复了HTML标签未闭合和ID拼写错误的问题

内容的提问来源于stack exchange，提问作者Wacky