Question

我有一个注册表单，客户可以通过下拉选择框选择他们想要查看的办公室数量。因此，在这种情况下，我需要我的代码以下一个方式工作 - 我选择选项值（例如4），它克隆了我可以填写的4个办公表格。我已经完成了＆＃34;添加新表格＆＃34;当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>

clone元素N次，取决于select选项值

2 个答案: