Laravel表单追加含数据库下拉选框行的问题求助

核心问题 #

1. Blade指令无法在客户端JS中执行：你在app.blade.php的JS代码中使用了Laravel的@forelse指令，但Blade模板仅在服务器端渲染时解析，客户端JS运行时无法识别该语法，导致动态追加的select没有生成选项。
2. select的name属性未动态绑定：新增行的select固定使用invetory[0][type]，会导致表单提交时数据冲突，无法正确区分不同行的类型值。

具体修改步骤 #

1. 在invetory.blade.php中传递产品类型数据到前端

在页面底部（Add More按钮上方）添加代码，将服务器端的产品类型数据转为JSON格式，供客户端JS调用：

<script>
// 提取不重复的产品类型，转为JSON数组
const productTypes = @json($products->pluck('typeoffood')->unique());
</script>

2. 修改app.blade.php中的JS代码，动态生成select选项

替换原有的JS逻辑，通过客户端JS循环生成select的选项，同时修正name属性的动态绑定：

var i = 0;

$("#add").click(function () {
    ++i;

    // 动态构建select的HTML代码
    let selectHtml = '<select class="form-control" name="invetory[' + i + '][type]">';
    selectHtml += '<option selected>Pick Type</option>';
    productTypes.forEach(function(type) {
        // 去除值前后的空格，避免提交无效数据
        const trimmedType = type.trim();
        selectHtml += `<option value="${trimmedType}">${type}</option>`;
    });
    selectHtml += '</select>';

    // 拼接整行表单元素
    const newRow = `
        <tr>
            <td><input type="text" name="invetory[${i}][item]" class="form-control" /></td>
            <td>${selectHtml}</td>
            <td><input type="text" name="invetory[${i}][tax]" class="form-control" /></td>
            <td><input type="text" name="invetory[${i}][price]" class="form-control" /></td>
            <td><input type="text" name="invetory[${i}][selling_price]" class="form-control" /></td>
            <td><input type="text" name="invetory[${i}][total_price]" class="form-control" /></td>
            <td><button type="button" class="btn btn-danger remove-tr">Remove</button></td>
        </tr>
    `;

    $("#dynamicTable").append(newRow);
});

$(document).on('click', '.remove-tr', function () {
    $(this).parents('tr').remove();
});

关键修改说明 #

• 通过@json()将服务器端的$products数据转为客户端可识别的JSON数组，避免在JS中使用Blade指令。
• 动态生成select选项时，循环productTypes数组构建option元素，确保新增行的select选项与初始行一致。
• 修正了select的name属性为invetory[${i}][type]，保证每个行的表单字段name唯一，提交后能正确获取所有行的数据。

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