Laravel动态多行列联动下拉框新增行失效问题求助

嘿，我完全懂你遇到的麻烦——动态新增的表单行里，产品下拉框根本触发不了GST下拉框的联动，只有第一行能正常工作对吧？这是因为你最初的事件绑定是直接绑在固定ID的元素上的，而动态生成的元素是后来才加入DOM的，初始绑定不会自动作用在它们身上。

下面是修复后的完整代码，我会把关键改动点给你讲清楚：

核心问题分析 #

你之前的联动代码只给初始的#product元素绑定了change事件，但动态添加的下拉框ID是product1、product2这类带编号的，它们不在初始DOM里，所以事件绑定没覆盖到。解决办法就是用事件委托，把事件绑定在父容器上，让它能监听后续新增元素的事件。

完整修复代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var i = 0;

    // 新增行逻辑
    $("#add").click(function(){
        i++;
        // 用模板字符串拼接HTML，可读性更强
        $('#inv_table').append(`
            <tr id="row${i}">
                <td>
                    <select class="form-control custom-select product-dropdown" id="product${i}" name="product_id">
                        <option>Select Product</option>
                        @foreach($products as $product)
                            <option value="{{$product->id}}">{{$product->product_name}}</option>
                        @endforeach
                    </select>
                </td>
                <td><input type="text" name="price[]" value=""/></td>
                <td>
                    <select class="form-control custom-select" id="gst${i}" name="gst[]">
                        <option value=""></option>
                    </select>
                </td>
                <td>
                    <!-- 把submit改成button，避免误触表单提交 -->
                    <input id="${i}" type="button" name="remove" value="Remove" class="btn btn-danger btn-sm btn_remove" >
                </td>
            </tr>
        `);
    });

    // 删除行逻辑
    $(document).on('click','.btn_remove',function(){
        var button_id = $(this).attr("id");
        $('#row'+button_id).remove();
    });

    // 下拉框联动逻辑（用事件委托覆盖所有动态元素）
    $('#inv_table').on('change', '.product-dropdown', function(e){
        var $currentDropdown = $(this);
        var productId = e.target.value;
        // 找到当前行对应的GST下拉框，不用依赖固定ID
        var $gstDropdown = $currentDropdown.closest('tr').find('[name="gst[]"]');

        // 没选产品时清空GST选项
        if (!productId) {
            $gstDropdown.empty().append('<option value=""></option>');
            return;
        }

        $.get('ajax-unit/'+productId, function(data){
            $gstDropdown.empty();
            // 确保后端返回的data.tax是正确格式
            $gstDropdown.append(`<option value="${data.tax}">${data.tax}</option>`);
        });
    });
});
</script>

关键改动点： #

1. 统一类名+事件委托：给所有产品下拉框加了.product-dropdown类，然后把联动事件绑定在表格#inv_table上，这样不管是初始还是动态新增的下拉框，只要匹配类名就能触发事件。
2. 动态定位对应GST下拉框：用closest('tr').find('[name="gst[]"]')找到当前行的GST下拉框，不再依赖固定ID，每一行都能独立联动。
3. 优化HTML拼接：用模板字符串（反引号`）替代字符串拼接，代码更整洁，不容易出错。
4. 修复删除按钮类型：把type="submit"改成type="button"，避免点击删除时意外提交整个表单。

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