Javascript 在表单中动态添加未知数量的多个Select元素

我正在处理一个表单，用户可以添加任意数量的具有多属性集的select元素，但我很难得到正确的结果。我的简化测试用例如下所示，但我们使用名称

fieldLocation[][]

添加现有选择（当用户编辑项目时），并且当它提交时，值被放置在同一数组中（即数组（1,2）），但当我们使用

fieldLocation[][]添加新元素时

并返回它自己的数组（数组（数组（1）、数组（2））中的每个选择。是否有任何方法可以在不生成名称的情况下动态添加元素

例如：

<form method="post">
    <select size="4" multiple="multiple" name="fieldLocation[][]">
        <option value="1">item1</option>
        <option value="2">item2</option>
        <option value="3">item3</option>
        <option value="4">item4</option>
    </select>

    <input type="submit">
</form>

我们想要的结果是：

array(1) {
  [1]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
}

---

尽管我在这一点上可能至少有部分错误，但我不相信第一级数组以外的任何东西都适用于名称。因此，fieldLocation[]只能是fieldLocation[]

解决这个问题的一种方法是在表单提交时对表单进行预处理，使用javascript获取所有选择的值，并用JSON编码发送到服务器

比如说：

$(form_submit_button).on('click',function(event){
 event.preventDefault();
 var data = form.serializeArray();
 data = JSON.stringify(data);
 $(<input/>,{value:data,type:'hidden',name:'fieldLocation'}).appendTo(form);
 form.submit();
});

$（表单提交按钮）。在（'click'，函数（事件）{
event.preventDefault（）；
var data=form.serializeArray（）；
data=JSON.stringify（数据）；
$（，{value:data，类型：'hidden'，名称：'fieldLocation'}）；
表单提交（）；
});

---

该示例很粗糙，但您将单击事件绑定到提交按钮（普通按钮或链接比实际的提交按钮更好）。然后序列化表单并将其转换为字符串。最后，在提交表单之前，使用数据创建一个新的隐藏输入元素。这应该允许您在php中使用

json\u decode

，根据需要提取数据。我不确定

serializeArray

是否能与您拥有的名称结构配合使用，因此如果不能，则需要手动序列化数据。

No-如果不指定数组键，php无法知道哪些值应分组在一起。

$(form_submit_button).on('click',function(event){
 event.preventDefault();
 var data = form.serializeArray();
 data = JSON.stringify(data);
 $(<input/>,{value:data,type:'hidden',name:'fieldLocation'}).appendTo(form);
 form.submit();
});