javascript - 如何使用Javascript动态设置输入字段的名称属性中的数组索引

Question

如何使用javascript动态设置输入字段的name属性中的数组索引？

<input type="text" name="item[][name]">
<input type="text" name="item[][description]">
<input type="text" name="item[][brand]">

如果我添加相同的输入字段集或使用 javascript 复制它，结果应如下所示:

<input type="text" name="item[0][name]">
<input type="text" name="item[0][description]">
<input type="text" name="item[0][brand]">

<input type="text" name="item[1][name]">
<input type="text" name="item[1][description]">
<input type="text" name="item[1][brand]">

Answer 1

可能你做错了事。如果您使用 js 创建此字段，请将索引放在那里。

纯 js 示例。

var maxInputNum = 5;

var inputName = document.createElement('input'),
    inputDescription = document.createElement('input'),
    inputBrand = document.createElement('input');

maxInputNum++;
inputName.name = 'item[' + maxInputNum + '][name]';
inputDescription.name = 'item[' + maxInputNum + '][description]';
inputBrand.name = 'item[' + maxInputNum + '][brand]';

form.appendChild(inputName);
form.appendChild(inputDescription);
form.appendChild(inputBrand);

当然，您可以使用 jQuery 来简化示例。

var maxInputNum = 5;

maxInputNum++;
var $inputName = $('<input type="text" name="item[' + maxInputNum + '][name]">'),
    $inputDescription = $('<input type="text" name="item[' + maxInputNum + '][brand]">'),
    $inputBrand = $('<input type="text" name="item[' + maxInputNum + '][description]">');

$('#form').append($inputName);
$('#form').append($inputDescription);
$('#form').append($inputBrand);

但更好的解决方案是使用像 angularjs 这样的东西。