PHP表单多维数组提交疑问：动态元素关联赋值问题

我来帮你理顺这个表单字段命名的坑！你遇到的问题其实是后端（大概率是PHP，因为这种数组式name是PHP的标准解析逻辑）对表单字段的数组解析规则导致的：当你使用[]这种无索引的命名时，每出现一次[]，后端就会自动生成一个新的递增索引，所以my_options[my_elements][][name]会在my_elements数组里新增一个索引（比如0），而紧接着的my_options[my_elements][][category]又会新增一个全新的索引（比如1），自然就把name和category分到两个不同的子数组里了。

正确的解决方案：给同组字段用相同的索引标识 #

不管是静态写的表单还是动态添加的字段，只要让同一组的name和category字段共享同一个索引，就能保证它们被放到同一个子数组里。这里分两种场景：

1. 静态表单或已知数量的字段

直接用数字索引就行，和你用[1]的方式一样，比如：

<!-- 第一组 -->
<input type="text" name="my_options[my_elements][0][name]" placeholder="名称">
<input type="text" name="my_options[my_elements][0][category]" placeholder="分类">

<!-- 第二组 -->
<input type="text" name="my_options[my_elements][1][name]" placeholder="名称">
<input type="text" name="my_options[my_elements][1][category]" placeholder="分类">

提交后，后端拿到的my_options['my_elements']就是包含多个子数组的数组，每个子数组都同时有name和category键。

2. 动态添加表单行（前端JS实现）

如果需要用户点击按钮新增表单组，你可以用JS维护一个计数器，给每一组字段分配唯一且相同的索引：

// 初始索引，从已有字段的数量开始
let rowIndex = document.querySelectorAll('.form-group').length;

function addNewRow() {
  const container = document.getElementById('elements-container');
  const newRow = document.createElement('div');
  newRow.className = 'form-group';
  newRow.innerHTML = `
    <input type="text" name="my_options[my_elements][${rowIndex}][name]" placeholder="名称">
    <input type="text" name="my_options[my_elements][${rowIndex}][category]" placeholder="分类">
  `;
  container.appendChild(newRow);
  rowIndex++;
}

这样每次新增的行，两个字段的索引都是当前的rowIndex，提交后就能完美分组。

额外小技巧：用临时字符串索引也可以 #

如果你不想用数字索引，也可以用临时的字符串（比如temp-1、new-group），后端处理时会自动把这些带字符串键的元素转为索引数组，效果和数字索引一样：

<input type="text" name="my_options[my_elements][temp-group][name]">
<input type="text" name="my_options[my_elements][temp-group][category]">

提交后后端的my_elements数组里依然会有一个包含name和category的子数组。

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