Question

我目前正在使用cakephp进行开发。我没有很多jquery的经验但是在这个任务中，我想使用jquery .clone（）函数克隆表单的输入/选择字段。我已经完成了这个剧本，但它并没有像我想的那样奏效。即使在谷歌搜索后我真的不知道如何解决这个问题。

问题是：我有这种类型的输入name="data[item][0][name]"，我想克隆此输入并像这样增加0值++

     name="data[item][0][name]"
     name="data[item][1][name]"
     name="data[item][2][name]"

当我点击添加属性按钮时，我做了什么它将替换并复制相同的整数值，如下所示：

如果我点击一次添加按钮：

name="data[item][1][name]"
name="data[item][1][name]"

我再次点击了添加按钮：

name="data[item][2][name]"
name="data[item][2][name]"
name="data[item][2][name]"

它复制相同的名称而不是增加值。我真的不知道是什么问题。请大家帮助我。

这是我的代码： PHP：

<div class="form-group">
     <div class="col-lg-2" style="padding:none;" >
                                    <p style="">Attribute</p>
                                        <button type="button" class="btn btn-success" id="addAttribute"><i class="fa  fa-plus-circle"></i> Add Attribute</button>
                                </div>
                                <?php $options = $attribute; //fetch some data from db?>
                                <div class="row" style="">
                            <div class="col-md-9" style="" >
                                <div class="col-lg-3" style="" >
                                    <h5 align="center"><u>Attribute Name</u></h5>
                                    <div class="form-group">
                                      <div class="col-lg-12">

                                    <?php echo $this->Form->input('attribute.0.attribute_id',array('class'=>'form-control','label'=>false,'id'=>'Attribute','options'=>$options));?>
                                    <div id="CloneAttribute">

                    </div>
                                </div>
                            </div>
                                </div>

                                <div class="col-lg-3" style="">
                                    <h5 align="center"><u>Attribute Value</u></h5>
                                    <div class="form-group">

                                      <div class="col-lg-12">
                                    <?php echo $this->Form->input('attribute.0.attribute_value',array('class'=>'form-control','label'=>false,'id'=>'Attribute2',));?>
                                <div id="CloneAttribute2">

                    </div>  
                                </div>

Jquery的

$(document).ready(function(){

    index = 0;
    $("#addAttribute").click(function(){
        index++;
     $("#Attribute").clone().attr("id","Attribute" + index)
        .appendTo('#CloneAttribute');
        //For each input fields contained in the cloned form...
         $('#CloneAttribute').each(function(){
            $('#CloneAttribute select').attr("name",'data[attribute]['+index+'][attribute_id]');                    
         });
});

谢谢stackoverflow ..

Answer 1

尝试：

$(document).ready(function () {
    index = 0;
    $("#addAttribute").click(function () {
        index++;
        $("#Attribute").clone()
        .attr("id", "Attribute" + index)
        .attr("name", "data[item][" + index + "][name]")
        .appendTo('#CloneAttribute');
    });
});

Jquery克隆克隆相同而不是新名称

1 个答案: