克隆元素N次，取決於選擇的選項值

Question

我有一個註冊表單，客戶可以通過下拉選擇框選擇他們想要查看的辦公室數量。所以在這種情況下，我需要我的代碼以下一步的方式工作 - 我選擇選項值（例如4），它克隆我可以填寫的4個辦公表格。 當opton更改時，我已經完成了「添加新窗體」，現在我需要將該窗體複製爲與我的選擇框中的值相同的次數。

<div class="inner6 register-form">bla-bla-bla, code with inputs and 
    <div class="amount-offices fright"> 
     <div class="headers">Anzahl teilnehmende Standorte:</div> 
     <select name="number_offices" class="number-offices" style="padding: 5px 5px 6px 5px;border: 1px solid #76ab26;margin-right: 10px;margin-bottom: 15px;"> 
      <?php for ($i=1 ; $i <=1 2; $i++) { ?> 
      <option value="<?php echo $i; ?>"> 
       <?php echo $i; ?> 
      </option> 
      <?php } ?> 
     </select> 
    </div> 
</div> 

隱藏的形式，我複製並追加到我的主要形式

<div class="copy-area"> 
    <div class="register-form-extra">bla-bla-bla, code with inputs</div> 
</div> 

和js

$('.number-offices').change(function(){ 
    var extraForm = $(".register-form-extra").wrap("<div>").parents('.copy-area').html(); 
    var officesAmount = $(this).find('option:selected').val(); 
    $('.copy-form').find('.register-form-extra').remove(); 
    $('.register-form').after(extraForm); 
}); 

Answer 1

$('.number-offices').on('change', function() { 
    var parent = $('.register-form'); 
    parent.find('.register-form-extra').remove(); 
    var num = parseInt(this.value); 
    var tmpForm = $(".copy-area .register-form-extra:eq(0)"); 
    for (var i = 0; i < num; i++) { 
     parent.append(tmpForm.clone()); 
    } 
}); 

jsfiddle DEMO

Answer 2

像這樣的工作：

個

$('.copy-area').hide(); 
 
$('.number-offices').change(function() { 
 
    var officesAmount = parseInt($(this).val(), 10); 
 
    var e = $('.copy-area .register-form-extra').eq(0); 
 
    $('.copy-area .register-form-extra').remove(); 
 
    for (var i = 0; i < officesAmount; i++) { 
 
    e.clone().appendTo('.copy-area'); 
 
    } 
 
    $('.copy-area').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="inner6 register-form"> 
 

 
    <div class="amount-offices fright"> 
 
    <div class="headers">Anzahl teilnehmende Standorte:</div> 
 
    <select name="number_offices" class="number-offices" style="padding: 5px 5px 6px 5px;border: 1px solid #76ab26;margin-right: 10px;margin-bottom: 15px;"> 
 
     <option value="0">0</option> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     <option value="5">5</option> 
 
    </select> 
 
    </div> 
 

 
</div> 
 

 

 
<div class="copy-area"> 
 
    <div class="register-form-extra"> 
 

 
    bla-bla-bla, code with inputs 
 

 
    </div> 
 
</div>