Laravel 8：在JavaScript中使用Blade标签生成下拉框失效问题

问题根源 #

Blade模板标签（比如@foreach、{{ }}）是服务器端解析的——页面渲染完成后，这些标签会被转换成对应的HTML内容再发送到客户端。而你在JavaScript里直接写@foreach这类代码时，它们只会被当作纯文本字符串处理，不会被Laravel解析生成下拉选项，自然无法正常工作。

解决方案一：提前将数据库数据转为JS对象，前端循环生成选项 #

1. 在Blade视图中，先把服务器端的$benang集合转成JS可识别的数组：

<script>
    // 用Laravel的@json指令直接将集合转为JS数组
    const barangList = @json($benang);
</script>

2. 修改你的JavaScript代码，用JS循环生成下拉框选项，替换原来的Blade标签：

$(document).ready(function () {
    let baris = 1;
    const barangList = @json($benang);

    $(document).on('click', '#tambah', function () {
        baris++;
        let html = `<tr id='baris${baris}'>`;
            html += `<td>${baris}</td>`;
            html += `<td>`;
            // 批量提交需将name设为数组格式
            html += `<select class='form-control id_barang' name='id_barang[]' required>`;
            html += `<option value='' hidden>-- Pilih Barang --</option>`;
            // JS循环生成下拉选项
            barangList.forEach(data => {
                html += `<option value='${data.id_barang}'>${data.id_barang}</option>`;
            });
            html += `</select>`;
            html += `</td>`;
            html += `<td contenteditable='true' class='pekerjaan'></td>`;
            html += `<td contenteditable='true' class='alamat'></td>`;
            // 用class代替id，避免动态元素id重复
            html += `<td> <button class='btn-sm btn-danger hapus' data-row='baris${baris}'>-</button> </td>`;
            html += `</tr>`;
        $('#tabel1').append(html);
    });

    // 处理删除按钮事件
    $(document).on('click', '.hapus', function () {
        const rowId = $(this).data('row');
        $(`#${rowId}`).remove();
    });
});

解决方案二：提前渲染隐藏模板行，动态克隆使用 #

这种方法更简洁，利用Blade提前渲染好下拉框，再通过JS克隆复用：

1. 在Blade视图中添加一个隐藏的模板行：

<!-- 隐藏的模板行，用于克隆生成新行 -->
<tr id='template-row' style='display:none'>
    <td></td>
    <td>
        <select class='form-control id_barang' name='id_barang[]' required>
            <option value='' hidden>-- Pilih Barang --</option>
            @foreach ($benang as $data)
                <option value='{{ $data->id_barang }}'>{{ $data->id_barang }}</option>
            @endforeach
        </select>
    </td>
    <td contenteditable='true' class='pekerjaan'></td>
    <td contenteditable='true' class='alamat'></td>
    <td> <button class='btn-sm btn-danger hapus'>-</button> </td>
</tr>

2. 修改JavaScript代码，克隆模板行并调整内容：

$(document).ready(function () {
    let baris = 1;

    $(document).on('click', '#tambah', function () {
        baris++;
        // 克隆模板行并移除隐藏属性
        const newRow = $('#template-row').clone().removeAttr('id').attr('id', `baris${baris}`).show();
        // 更新行号
        newRow.find('td:first').text(baris);
        // 添加到表格
        $('#tabel1').append(newRow);
    });

    // 删除行事件
    $(document).on('click', '.hapus', function () {
        $(this).closest('tr').remove();
    });
});

注意事项 #

• 动态生成的元素不能重复使用id，否则会导致事件绑定失效，建议用class标识元素。
• 批量提交表单时，表单元素的name属性要设为数组格式（比如id_barang[]），后端才能正确接收批量数据。

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