如何計數輸入名稱[0]名稱[1]克隆時

Question

我想在輸入字段中計算我在Laravel中使用的動態形式的索引，但我無法弄清楚如何實現那。

這是我當前的代碼我使用：

HTML：

<div id="language"> 
    <div class="language"> 
     <div class="row"> 
      <div class="form-group col-md-6 col-sm-6"> 
       <input class="form-control" placeholder="Language" name="language[0][name]" type="text"> 
      </div> 
      <div class="form-group col-md-6 col-sm-6"> 
       <select class="form-control" title="Language level" name="language[0][level]"><option value="medium">Medium</option><option value="good">Good</option><option value="perfect">Perfect</option></select> 
      </div> 
      <p><a href="#" class="addsection">Add Section</a></p> 
     </div> 
    </div> 
    </div> 

JS：

//Clone fields 

//define template 
var template = $('#language .language:first').clone(); 

//define counter 
var sectionsCount = 1; 
//add new section 
$('body').on('click', '.addsection', function() { 


    //increment 
    sectionsCount++; 

    //loop through each input 
    var section = template.clone().find(':input').each(function(){ 

     //set id to store the updated section number 
     var newId = this.id + sectionsCount; 

     //update for label 
     $(this).prev().attr('for', newId); 

     //update id 
     this.id = newId; 

    }).end() 

    //inject new section 
     .appendTo('#language'); 
    return false; 


}); 

當我克隆領域，如何才能讓我[0]數起來？ 當我刪除計數下降的字段？

Answer 1

當創建需要爲字段更新克隆屬性名稱，以便值[0]可以是新的元件[1]，[2]，....

的代碼是：

var txtName = this.getAttribute('name'); 

    txtName = txtName.replace('[0]', '[' + (sectionsCount - 1) + ']'); 

    this.setAttribute('name', txtName); 

爲了去除一個第一節添加一個刪除錨和所述代碼是：

$('body').on('click', '.removesection', function() { 
     $(this).closest('.language').remove(); 
    }); 

的片段：

$(function() { 
 
    //Clone fields 
 

 
    //define template 
 
    var template = $('#language .language:first').clone(); 
 

 
    //define counter 
 
    var sectionsCount = 1; 
 
    //add new section 
 
    $('body').on('click', '.addsection', function() { 
 

 

 
    //increment 
 
    sectionsCount++; 
 

 
    //loop through each input 
 
    var section = template.clone().find(':input').each(function(){ 
 

 
     //set id to store the updated section number 
 
     var newId = this.id + sectionsCount; 
 

 
     //update for label 
 
     $(this).prev().attr('for', newId); 
 

 
     //update id 
 
     this.id = newId; 
 
     var txtName = this.getAttribute('name'); 
 
     txtName = txtName.replace('[0]', '[' + (sectionsCount - 1) + ']'); 
 
     this.setAttribute('name', txtName); 
 

 
    }).end() 
 

 
    //inject new section 
 
    .appendTo('#language'); 
 
    return false; 
 

 

 
    }); 
 

 
    // remove current section 
 
    $('body').on('click', '.removesection', function() { 
 
    $(this).closest('.language').remove(); 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div id="language"> 
 
    <div class="language"> 
 
     <div class="row"> 
 
      <div class="form-group col-md-6 col-sm-6"> 
 
       <input class="form-control" placeholder="Language" name="language[0][name]" type="text"> 
 
      </div> 
 
      <div class="form-group col-md-6 col-sm-6"> 
 
       <select class="form-control" title="Language level" name="language[0][level]"><option value="medium">Medium</option><option value="good">Good</option><option value="perfect">Perfect</option></select> 
 
      </div> 
 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="addsection">Add Section</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="removesection">Remove Section</a></p> 
 
     </div> 
 
    </div> 
 
</div>