Laravel Blade中动态添加的select标签如何正确设置name属性？

1. 计数器变量的实现方案 #

• 不建议使用PHP变量传递计数器：PHP是服务端预渲染的，初始渲染完成后变量值就固定了，后续前端动态新增字段时无法自动递增，每次新增都请求后端会完全没必要增加服务端压力。
• 正确实现方式：直接在JS中维护全局计数器即可，初始值对应页面加载完成后已有的服务选择框数量即可，不需要和后端交互。

2. 原命名方式下控制器的取值方法 #

如果继续使用service_序号的命名规则，控制器可以通过两种方式取值：

• 方案1：遍历请求参数，匹配前缀为service_的键：

$services = [];
foreach ($request->all() as $key => $value) {
    if (str_starts_with($key, 'service_')) {
        $services[] = $value;
    }
}

• 方案2：额外新增一个隐藏域存储总服务数，提交时按序号循环取值，确实需要拼接字符串作为变量名，使用非常不便利。

3. 数组封装方案（推荐） #

完全可以将所有选择项封装为数组提交，这也是Laravel动态表单的标准最佳实践，只需要把字段的name属性改为数组名[]格式即可，后端会自动将同数组名的字段值聚合为数组。

优化后的代码示例 #

Blade视图代码（已修正原代码标签闭合错误）

<form action="{{ route('orders.store') }}" method="POST">
    @csrf
    <div class="input-group mb-3">
        <select class="form-select" name="services[]">
            <option selected>Choose a service</option>
            @foreach ($services as $service)
                <option value="{{ $service->id }}">{{ $service->service_name }}</option>
            @endforeach
        </select>
        <!-- 数量输入框也对应改成数组格式 -->
        <input type="number" style="width: 150px;" name="quantities[]" value="0" min="0" max="100">
        <a type="button" style="width: 150px;" class="btn btn-success" href="#" onclick="addSelectForServices({{ json_encode($services) }});">Add a service</a>
    </div>
    <div id="addable_fields">
    </div>
</form>

JS代码

// 全局计数器，初始值对应页面加载完成后已有的服务数量，默认初始1个所以设为1，有初始多个修改为对应数值即可
let serviceCount = 1;

function addSelectForServices(services){
    const container = document.getElementById("addable_fields");
    // 新建输入组容器，同时新增服务选择框和数量输入框
    const inputGroup = document.createElement("div");
    inputGroup.className = "input-group mb-3";

    const select = document.createElement("select");
    select.setAttribute("class", "form-select");
    select.setAttribute("name", "services[]");
    
    let newOption = document.createElement("option");
    newOption.innerHTML = "Select...";
    newOption.setAttribute("selected", "");
    select.appendChild(newOption);
    for(let i = 0; i < services.length; i++)
    {
        newOption = document.createElement("option");
        newOption.setAttribute("value", services[i].id);
        newOption.innerHTML = services[i].service_name;
        select.appendChild(newOption);
    }

    // 新增对应数量输入框
    const quantityInput = document.createElement("input");
    quantityInput.type = "number";
    quantityInput.style = "width: 150px;";
    quantityInput.name = "quantities[]";
    quantityInput.value = "0";
    quantityInput.min = "0";
    quantityInput.max = "100";

    inputGroup.appendChild(select);
    inputGroup.appendChild(quantityInput);
    container.appendChild(inputGroup);
    
    serviceCount++;
}

控制器取值代码

public function store(Request $request)
{
    // 直接获取服务ID数组和对应数量数组
    $serviceIds = $request->input('services', []);
    $quantities = $request->input('quantities', []);

    // 遍历即可处理关联数据，比如写入订单-服务中间表
    foreach ($serviceIds as $index => $serviceId) {
        $quantity = $quantities[$index] ?? 0;
        // 此处写入你的业务逻辑
    }

    // 剩余业务逻辑
}

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