Laravel 5.2动态下拉框新增行失效，求助JS实现foreach方法

这个问题我之前也碰到过——后端渲染的第一行下拉正常，JS新增的行就空了，核心就是后端的下拉选项数据没传到JS里，导致新增时没法循环生成选项。下面给你一步步解决的方案：

第一步：把后端下拉选项传给JavaScript #

首先在你的Blade视图里，把用于生成下拉的后端数据（比如从数据库查出来的分类、选项列表）转成JS能访问的变量。Laravel 5.2虽然没有@json指令，但可以用json_encode来处理：

假设你后端把下拉选项存在$dropdownItems变量里（比如是一个Eloquent集合，包含id和name字段），在页面的<script>标签里添加：

// 将后端的下拉选项转为JS可访问的对象
var dropdownOptions = {!! json_encode($dropdownItems->pluck('name', 'id')) !!};

这里pluck('name', 'id')是把集合转成「值为id，显示文本为name」的关联数组，刚好符合下拉框<option>的结构。

第二步：修改新增行的JavaScript代码 #

接下来要改你新增行的JS逻辑，不能只复制空的下拉框结构，而是要循环dropdownOptions动态生成所有选项。

如果你用原生JS： #

function addNewRow() {
    // 1. 创建下拉框元素
    const select = document.createElement('select');
    select.className = 'form-control';
    select.name = 'your_field_name[]'; // 和第一行的name保持一致，方便后端接收数组

    // 2. 添加默认占位选项（可选）
    const defaultOpt = document.createElement('option');
    defaultOpt.value = '';
    defaultOpt.textContent = '请选择';
    select.appendChild(defaultOpt);

    // 3. 循环生成所有下拉选项
    for (const value in dropdownOptions) {
        const option = document.createElement('option');
        option.value = value;
        option.textContent = dropdownOptions[value];
        select.appendChild(option);
    }

    // 4. 组装整行元素（包含删除按钮）
    const row = document.createElement('div');
    row.className = 'dynamic-row'; // 自定义类名方便样式或操作
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    deleteBtn.onclick = () => row.remove();

    row.appendChild(select);
    row.appendChild(deleteBtn);

    // 5. 把新行添加到容器里
    document.getElementById('dynamic-rows-container').appendChild(row);
}

如果你用jQuery（更简洁）： #

function addNewRow() {
    // 构建下拉框
    const $select = $('<select>', {
        'class': 'form-control',
        'name': 'your_field_name[]'
    });

    // 添加默认选项
    $select.append($('<option>', {
        'value': '',
        'text': '请选择'
    }));

    // 循环插入所有选项
    $.each(dropdownOptions, function(value, text) {
        $select.append($('<option>', {
            'value': value,
            'text': text
        }));
    });

    // 构建行并添加到容器
    const $row = $('<div>', {'class': 'dynamic-row'})
        .append($select)
        .append($('<button>', {
            'text': '删除',
            'click': function() {
                $(this).parent().remove();
            }
        }));

    $('#dynamic-rows-container').append($row);
}

第三步：对应你的Blade结构 #

确保页面里有存放动态行的容器，比如：

<div id="dynamic-rows-container">
    <!-- 第一行（后端渲染的初始行） -->
    <div class="dynamic-row">
        <select name="your_field_name[]" class="form-control">
            <option value="">请选择</option>
            @foreach($dropdownItems as $item)
                <option value="{{ $item->id }}">{{ $item->name }}</option>
            @endforeach
        </select>
        <button onclick="this.parentElement.remove()">删除</button>
    </div>
</div>

<!-- 新增按钮 -->
<button onclick="addNewRow()">添加新行</button>

这样修改后，不管新增多少行，下拉框都会自动加载所有选项，和第一行的效果完全一致啦。

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