ASP.NET Core中trAppend动态添加行后级联下拉框失效问题

核心原因 #

问题本质是动态生成的DOM元素没绑定事件。你原先的JS代码大概率只给页面加载时就存在的下拉框绑定了change事件，但通过trAppend新增的行里的产品下拉框是后续生成的，没被绑定事件，所以选产品时不会触发颜色联动。和表单本身无关，只是事件绑定逻辑没覆盖到动态元素。

具体解决方案 #

1. 改用事件委托绑定联动逻辑 #

把直接绑定单个下拉框的事件，改成委托给父容器（比如表格的<tbody>），这样不管是初始行还是动态新增的行，只要产品下拉框触发change，都会被捕获到。

示例代码：

// 替换原来直接绑定#ProductId的代码
$('tbody').on('change', '.product-select', function() {
    var productId = $(this).val();
    // 找到当前行对应的颜色下拉框
    var colorDropdown = $(this).closest('tr').find('.color-select');
    
    // 发起AJAX请求获取对应产品的颜色列表
    $.ajax({
        url: '/Invoice/GetColorsByProductId', // 替换成你的实际接口地址
        type: 'GET',
        data: { productId: productId },
        success: function(data) {
            // 清空并重新填充颜色选项
            colorDropdown.empty();
            colorDropdown.append('<option value="">请选择颜色</option>');
            $.each(data, function(index, item) {
                colorDropdown.append(`<option value="${item.Id}">${item.Name}</option>`);
            });
        }
    });
});

2. 给动态行的下拉框加统一类名 #

在trAppend生成新行的代码里，给产品下拉框加product-select类，颜色下拉框加color-select类，确保事件委托能精准匹配。

示例动态添加行的代码片段：

function addNewRow() {
    // 注意这里的表单名称要符合模型绑定规则，index需要递增
    var rowIndex = $('tbody tr').length;
    var newRow = `<tr>
        <td>
            <select class="form-control product-select" name="InvoiceDetails[${rowIndex}].ProductId">
                <!-- 这里可以默认加载所有产品选项 -->
            </select>
        </td>
        <td>
            <select class="form-control color-select" name="InvoiceDetails[${rowIndex}].ColorId">
                <option value="">请选择颜色</option>
            </select>
        </td>
        <td><button type="button" onclick="removeRow(this)">-</button></td>
    </tr>`;
    $('tbody').append(newRow);
}

3. 额外注意事项 #

• 确保后端接口/Invoice/GetColorsByProductId能正确接收productId，并返回包含Id和Name字段的颜色JSON数据。
• 动态生成的表单控件名称要遵循ASP.NET Core模型绑定规则（比如InvoiceDetails[index].ProductId，index需按行递增，避免绑定失败）。

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