克隆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);