創建動態表單元素（具有遞增的名稱屬性）

Question

如何動態創建表單元素並為其提供動態增加的輸入名稱屬性？ 我正在使用jquery，但我願意接受任何解決方案。

我有一個看起來像這樣的div：

<div>

<input type="text" name="title1" />

<input type="text" name="body1" />

<select name="photo1" size="1">

<option value="0">foo</option>

</select>

</div>

我想克隆它n次並將名稱值增加1，所以，例如，第二個div看起來像這樣（只有名稱值改變）：

<div>

<input type="text" name="title2" />

<input type="text" name="body2" />

<select name="photo2" size="1">

<option value="0">foo</option>

</select>

</div>

使用jquery克隆div很簡單：

$(document).ready(function(){
    $('.toClone').click(function(){
        $(this).clone(true).insertAfter(this);
     });
});

但我無法自動增加動態創建的div字段的名稱值。
任何人都有洞察力如何做到這一點？

Answer 1

你用什么處理這個？ 使用PHP，您可以將字段命名為title[] ， body[]等，以便將它們作為數組發送。 這將是最好的方法，因為克隆將是微不足道的。 據我所知，它的工作方式與其他技術類似。 無論如何，如果你真的想按照自己的方式去做：

$(document).ready(function(){
    $('.toClone').click(function(){
        var el = $(this).clone(true).insertAfter(this);
        var regex = new RegExp(/^(.+)(\d+)$/);
        $(el).find(':input').each(function() {
            var match = $(this).attr('name').match(regex);
            $(this).attr('name', match[1] + (++match[2]));
        });
    });
});

這應該夠了吧。

Answer 2

可以使用以下命令更改名稱屬性字段：

var i = 1;
$(this).clone(true).attr('name', 'title' + i).insertAfter(this);

然后你只需要管理遞增變量。