从数据库获取商品售价，用jQuery实现输入数量实时计算总金额求助

核心问题 #

• 你渲染<option>时没有把商品售价存入自定义属性，jQuery无法获取对应商品的saleprice值，计算结果为NaN
• 事件绑定语法错误，多个事件名称之间用空格分隔即可，不需要加逗号

修改步骤 #

1. 修改PHP渲染下拉选项的代码 #

在输出<option>时新增data-price属性存储对应商品的售价，修改后代码如下：

<select name="product_id" class="form-control select" id="select" > 
    <option disabled selected>-- Select Product --</option>
    <?php
        $db = mysqli_connect('localhost', 'root', '', 'login');
        $records = mysqli_query($db, "SELECT * From products where deleted=0");
        while($data = mysqli_fetch_array($records))
        {
            // 新增data-price属性存储售价
            echo "<option value='". $data['id'] ."' data-price='".$data['saleprice']."'>" .$data['name'] ."</option>";
        }  
    ?>  
</select>
<label> Quantity: </label>
<input type="text" name="quantity[]" class="quantity" id="productqty" placeholder="Enter Quantity" required  /> 
<input type="hidden" class='total' name="total[]" id="total_amount" placeholder="Total Amount" />

注：同时删除了select标签重复定义的class冗余属性

2. 修改jQuery逻辑代码 #

修正事件绑定语法，新增空值容错处理：

$(document).on('change focusout', '#select,#productqty', function(){
    // 数量为空时默认取0，避免计算出NaN
    var productQty = parseInt($('#productqty').val()) || 0;
    var productPrice = parseFloat($('#select').find(':selected').data('price')) || 0;
    var totalAmount = (productQty * productPrice).toFixed(2); // 保留两位小数适配金额场景
    if(!isNaN(totalAmount)) { 
        $('#total_amount').val(totalAmount);
    }
});

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