在窗体中动态添加未知数量的多选元素


Dynamically Adding An Unknown Number of Multiple Select Elements in a Form

我正在处理一个表单,用户可以使用多属性集添加任意数量的select元素,但我很难获得正确的结果。我的简化测试用例如下,但我们使用名称fieldLocation[<id of field in database>][]添加现有的选择(当用户编辑项目时),当它提交时,值被放置在同一个数组(即数组(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(2) {
  [0]=>
  array(1) {
    [0]=>
    string(1) "1"
  }
  [1]=>
  array(1) {
    [0]=>
    string(1) "2"
  }
}

我们想要的结果:

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();
});

这个例子很粗糙,但您将一个点击事件绑定到提交按钮(一个普通的按钮或链接,而不是一个实际的提交按钮会更好)。然后序列化表单并将其转换为字符串。最后,在提交表单之前,您用数据创建了一个新的隐藏输入元素。这应该允许您在php中使用json_decode来根据需要提取数据。我不确定serializeArray是否能使用您现有的名称结构,所以如果不能,则需要手动序列化数据。