克隆divs與下拉菜單選項jquery

Question

我有1選擇框，其中有數字作爲選項。我有一個div內的3個輸入文本框。

當用戶在選擇框中選擇一個數字，我想重複該div取決於選擇框的數量...

重要部分是，該ID和每個文本的名稱盒有遞增，所以這樣的事情：

text_box_first_1, text_box_second_2, text_box_thrid_3 
text_box_first_2, text_box_second_2, text_box_thrid_2 

編輯： 對不起，忘了寄我的了：

 <script> 
    function clone(){ 
     var $newdiv = $('.initial_clone_div:first').clone(); 
     $('#add_clones_here').append($newdiv); 
    } 

    $('#num_periods').change(function() { 
     for(var counter = 0; counter < $(this).val()-1; counter++) { 
      $('.period_title').html('Period ' +(counter+1)); 
      clone(); 
     } 
    }); 


</script> 

<!-- Period scores --> 
    <div class="form-group initial_clone_div"> 
     <h3 class="period_title" id="period_title_1">Period 1</h3> 
     <div class="col-md-4"> 
      <label class="control-label" for="num_periods">{{{ Lang::get('admin/teams/terms.blue_team') }}}</label> 
      <input class="form-control" type="text" name="blue_team_period_1" id="blue_team_period_1" />  
     </div> 
     <div class="col-md-4"> 
      <label class="control-label" for="num_periods">{{{ Lang::get('admin/teams/terms.grey_team') }}}</label> 
      <input class="form-control" type="text" name="grey_team_period_1" id="grey_team_period_1" />  
     </div> 
     <div class="col-md-4"> 
      <label class="control-label" for="num_periods">{{{ Lang::get('admin/teams/terms.black_team') }}}</label> 
      <input class="form-control" type="text" name="black_team_period_1" id="black_team_period_1" /> 
     </div> 
    </div> 
    <!-- ./ Period scores --> 

    <div id="add_clones_here"> 

    </div> 

我不知道如何修改文本框的ID和名稱。 我也得到了展示權期號（H3標籤）

編輯一個問題：解決方法：

function clearClones(){ 
     $('.initial_clone_div').each(function (i) { 
      $(this).remove(); 
     }); 
    } 

    $('#num_periods').change(function() { 
     $div = $('.initial_clone_div:first'); 
     clearClones(); 
     for (var j = 1; j <= $('#num_periods').val(); j++) { 
      $div.clone() 
       .appendTo('#outer_div') 
       .find('input') 
       .each(function (k, v) { 
        if(k+1 == 1) 
         var team = "blue"; 
        else if(k+1 == 2) 
         var team = "grey"; 
        else if(k+1 == 3) 
         var team = "black"; 

       var theId = team+ 'team_period_' + (j); 
       $(v).attr('id', theId); 
       $(v).attr('placeholder', theId); 
      }); 
     } 
    }); 

Answer 1

我創建了一個小提琴（LINK），應該是很容易按照有關如何做到這一點。

HTML

<select id="select"></select> 
<div id="outerDiv"> 
    <div id="theDiv"> 
     <input type="text" /> 
     <input type="text" /> 
     <input type="text" /> 
    </div> 
</div> 

JS

// Create dropdown 
for (var i = 0; i < 11; i++) { 
    $('#select').append('<option value="' + i + '">Clone ' + i + ' Times</option>'); 
} 

// Do main procedure 
var inc=1; 

$('#select').change(function() { 
    inc++ 
    for (var j = 0; j <= $('#select').val(); j++) { 
     $('#theDiv').clone() 
      .appendTo('#outerDiv') 
      .find('input') 
      .each(function (k, v) { 
      var theId = 'input_' +inc+ '_' + (j + 1) + '_' + (k + 1); 
      $(v).attr('id', theId); 
      $(v).attr('placeholder', theId); 
     }); 
    } 
}); 

Answer 2

1）獲取將被克隆的元素的id。既然你想僅增加數，你必須根據該_

var sp = $('.initial_clone_div:first').prop('id').split('_'); 

2分割）sp數組的最後一個索引轉換爲數字，並增加它。然後再次轉換回string dataType。

sp[3] = (+sp[3]+1).toString(); 

3）現在加入並將newId設置爲克隆元素。

4）.clone([withDataAndEvents ] [, deepWithDataAndEvents ])

var newId = sp.join('_'); 
var $newdiv = $('.initial_clone_div:first').clone(true, true).prop('id', newId);