javascript - 使用数组构建 HTML 表单

Question

我有一个包含以下元素的表单:

<div class="row1">
   <select name="someSelectField" multiple="multiple" class="selectList">
      <option value="1">1</option>          
      <option value="2">2</option>          
   </select>
   <input type="checkbox" name="checkboxField" class="checkboxField" value="1" /> checkbox</td>
</div>
<div class="row2">
   <select name="someSelectField" multiple="multiple" class="selectList">
      <option value="1">1</option>          
      <option value="2">2</option>          
   </select>
   <input type="checkbox" name="checkboxField" class="checkboxField" value="1" /> checkbox</td>
</div>

这些将继续在页面下方。这些相同字段有很多不同的行。没有设置行，因为 javascript 用于创建更多行。

我的问题是，每个名称属性的值应该是多少，以便它保持分组为数组并可以一起引用？例如，如果我使用 someSelectField[1]，当方法为 GET 时，表单会像 someSelectField[1]=1&someSelectfield[1]=2 一样发送它(如果两者都被选中)。我正在寻找它是 someSelectField=1&someSelectfield=2 等。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

你为什么不给控件唯一的名字呢？如果您的 javascript 能够为 div 提供索引类名，您可以像这样重组 html:

<div class="row1">
   <select name="someSelectField1" multiple="multiple" class="selectList">
      <option value="1">1</option>          
      <option value="2">2</option>          
   </select>
   <input type="checkbox" name="checkboxField1" class="checkboxField" value="1" /> checkbox</td>
</div>
<div class="row2">
   <select name="someSelectField2" multiple="multiple" class="selectList">
      <option value="1">1</option>          
      <option value="2">2</option>          
   </select>
   <input type="checkbox" name="checkboxField2" class="checkboxField" value="1" /> checkbox</td>
</div>

这也有独立于服务器的好处，因为一些框架可以很好地解析 html 数组并为您提供适当的数组，而有些只是覆盖键。

如果您被允许从中间移除元素而不是仅仅从末尾移除元素，您的解析在后端可能会变得有点困惑，但它应该不会太糟糕。如果这是一个问题，您可以编写一个简单的 jQuery 脚本来重新排列您的所有姓名。警告，未经测试的代码如下:

$("div[class^='row']").each(function(idx, value) {
    var $value = $(value);
    $value.find(".selectList").attr("name", "someSelectField"+(idx+1));
    $value.find(".checkboxField").attr("name", "checkboxField"+(idx+1));
});