드롭 다운 메뉴의 옵션으로 복제 div Jquery

Question

옵션으로 숫자가있는 선택 상자가 하나 있습니다. div 안에 3 개의 입력 텍스트 상자가 있습니다.

사용자가 선택 상자에 숫자를 선택

, 내가 선택 상자의 수에 따라 그 사업부를 복제하고 싶은 ...

중요한 부분은, 그 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와 이름을 수정합니다. 해결책 :

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를 가져옵니다 는 또한 올바른 기간 수 (H3 태그)

편집을 보여주는 문제가있어. 당신은 단지 수를 증가 할 때문에, 당신은 수에 sp 배열의 마지막 인덱스를 변환하고 증가)을 _

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

2에 따라 분할 할 수 있습니다. 그런 다음 다시 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);