表格下拉框触发Ajax仅第一行生效其余行无响应如何解决？

云上老周

2026-10-1

问题根因

你使用了ID选择器#product_id绑定change事件，HTML规范中ID属性全局唯一，浏览器只会匹配到第一个符合条件的下拉框，因此只有第一行的下拉变更能触发事件
回调中固定选择#product_id取值、固定更新#product_price的内容，也只会操作第一行的对应元素

修复方案

调整事件绑定逻辑，使用类选择器绑定事件，触发时基于当前触发元素定位同属一行的价格列进行更新，修正后的JS代码如下：

$(function () {
    // 如果后续有动态新增表格行的需求，可改为事件委托写法：$(document).on('change', '.sel', function() {})
    $('.sel').change(function () {
        // 获取当前触发事件的下拉对象
        const $currentSelect = $(this);
        // 定位到当前下拉所在的行，再匹配行内的价格列
        const $priceTd = $currentSelect.closest('tr').find('.product_price');
        $.ajax({
            type: "POST",
            url: "/Home/GetPrice",
            datatype: "Json",
            data: { product_id: $currentSelect.val() },
            success: function (data) {
                $priceTd.html(data);
                multiply();
            },
            error: function () {
                $priceTd.text(0);
                multiply();
            }
        });
    });
});