Question

我有这样的标记

<div class="content">
<select class="form-control" id="source" data-id="0" name="test['source'][0][]">
    <option value="asdf">asdf</option>
    <option value="sda">sda</option>
    <option value="ght">ght</option>
    <option value="wer">wer</option>
</select>
<select class="form-control" id="target" data-id="0" name="test['target'][0][]">
    <option value="ght">ght</option>
    <option value="wer">wer</option>
    <option value="sda">sda</option>
</select>    
<button type="button" class="btn add-row"> Add</button>
</div>

现在我要克隆div的全部内容。所以我像这样制作了我的jQuery

jQuery(document).ready(function() {
    var clone = jQuery('div.content').clone(true);
    jQuery('.add-row').click(function() {
        var parent = jQuery('div.content').last();
        clone.clone(true).insertAfter(parent); 
    });
});

这个用克隆做得很好。现在，如果您将看到标记，我使用了select标记的名称 (test['source'][0][])和(test['target'][0][])。现在我希望当点击添加按钮时，名称参数也会改变。就像第一行将被应用时一样，名称将是这样的

<select class="form-control" id="source" data-id="1" name="test['source'][1][]"></select>

<select class="form-control" id="target" data-id="1" name="test['target'][1][]"></select>

然后在接下来的名字将是这样的

<select class="form-control" id="source" data-id="2" name="test['source'][2][]"></select>

<select class="form-control" id="source" data-id="2" name="test['target'][2][]"></select>

有人可以告诉我该怎么做吗？任何帮助都会非常明显。感谢

Answer 1

您可以在克隆后链接prop以更改select的名称。

jQuery(document).ready(function() {
  var clone = jQuery('div.content').clone(true);
    var i=0;
    jQuery('body').on("click",".add-row",function() {
        i++;
        var parent = jQuery('div.content').last();
        clone.clone(true).insertAfter(parent)
        .find("select").each(function(){
          var $item=$(this);
          $item.prop("name","test['"+$item.attr("id")+"']["+ i+"][]")
          .attr("data-id",i);
        });
    });
});

我也改变了$（“。add-row”）。点击...用jQuery（'body'）。on（“click”，“。add-row”，function（）{... make它适用于克隆的。

Demo

Answer 2

您可以在点击事件中编辑名称属性，如下所示：

jQuery(document).ready(function() {
    count = 1;
    var clone = jQuery('div.content').clone(true);
    jQuery('.add-row').click(function() {
        var parent = jQuery('div.content').last();
        $(parent).find('select').each(function () {
            if($(this).attr('id') == 'source') {
                $(this).attr('name', "test['source'][" + count + "][]");
            }
            else {
                $(this).attr('name', "test['target'][" + count + "][]");
            }
        });
        count++;
        clone.clone(true).insertAfter(parent); 
    });
});

我希望这会有所帮助。

当添加新行时，jQuery更改html标记的参数

2 个答案: