为什么AJAX无法根据select下拉选择的价格区间获取对应商品价格？

核心问题1：HTML重复ID冲突 #

你在循环输出多个商品的过程中，给所有的下拉选择框都设置了相同的id="price_range"，给所有价格展示区域都设置了相同的id="product_price"。HTML规范要求页面内ID必须全局唯一，jQuery的ID选择器只会匹配页面中第一个对应ID的元素，所以不管你修改哪个商品的下拉选项，只会触发第一个下拉的事件，也只会修改第一个商品的价格展示。

核心问题2：AJAX传递的商品ID错误 #

你在JS代码中直接写的var product_id = <?php echo $product_id ?>;，这个$product_id是PHP循环遍历商品结束后剩下的最后一个商品的ID，不管你修改哪个商品的下拉，传给后端的都是最后一个商品的ID，永远拿不到当前操作商品的对应价格。

修复方案 #

第一步：修改HTML循环部分的元素属性 #

把固定ID改为带商品ID的动态ID，同时给下拉框加类名和自定义属性存储当前商品ID，修改后的对应代码如下：

<!-- 下拉选择框部分 -->
<select name="price_range" class="form-control price_range" data-product-id="<?php echo $product_id; ?>">
    <option value="price_range1" selected><?php echo $row['weight_range1']; ?> <?php echo $row['product_unit']; ?></option>
    <option value="price_range2"> <?php echo $row['weight_range2']; ?><?php echo $row['product_unit']; ?></option>
    <option value="price_range3"><?php echo $row['weight_range3']; ?><?php echo $row['product_unit']; ?></option>
    <option value="price_range4"><?php echo $row['weight_range4']; ?> <?php echo $row['product_unit']; ?></option>
</select>

<!-- 价格展示部分 -->
<span id="product_price_<?php echo $product_id; ?>">
    <input type="hidden" name="cart_price" value="<?php echo $row['product_price1']; ?>">
    <?php echo $row['product_price1']; ?>
</span>/<?php echo $row['product_unit']; ?>

第二步：修改JS事件绑定逻辑 #

用类名绑定事件，从当前操作的下拉框读取商品ID，再更新对应商品的价格区域：

$(document).ready(function() {
    // 用类名绑定所有商品的下拉变更事件
    $('.price_range').on('change', function() {
        // 从当前下拉的自定义属性取对应商品ID
        var product_id = $(this).data('product-id');
        var price_range = this.value;
        $.ajax({
            url: "includes/fetch-price.php",
            type: "POST",
            data: {
                product_id: product_id,
                price_range: price_range
            },
            cache: false,
            success: function(result){
                // 只更新当前商品对应的价格区域
                $("#product_price_" + product_id).html(result);
            }
        });
    });
});

额外优化建议 #

你当前fetch-price.php的SQL语句直接拼接用户传入的product_id，存在SQL注入风险，建议改为预处理查询：

<?php
require_once "../session.php";
$product_id = $_POST["product_id"];
$price_range = $_POST["price_range"];
// 使用预处理语句避免注入
$stmt = $conn->prepare("SELECT product_price1, product_price2, product_price3, product_price4 FROM products where id = ?");
$stmt->bind_param("i", $product_id);
$stmt->execute();
$scrow = $stmt->get_result()->fetch_assoc();

$price_field = str_replace("range", "price", $price_range);
echo '<input type="hidden" name="cart_price" value="'.$scrow[$price_field].'">'.$scrow[$price_field];
?>

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