如何克隆基于 div 的选择选项答案

【问题标题】：how to clone div bassed select option如何克隆基于 div 的选择选项
【发布时间】：2019-03-21 13:35:56
【问题描述】：

我有选择数字计数的选项，所以当用户选择任何数字时，我现在需要通过这个数字克隆 div 标签个人信息，例如： - 选择 8 次克隆 8 次 ..

我尝试通过使用（for循环）来做到这一点，但我在运行时遇到问题我看到克隆超过这个数字例如：- 选择 8 克隆 16 次

这是 html 代码和我尝试的 js 代码

$('#c3').change(function() {
  $('.cloneHere').empty();

  var count = $('#c3').val();
  for (i = 1; count > i; i++) {
    var clone = $('.rowClone').clone();

    $('.cloneHere').append(clone);


  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
  <label for="">count of person</label>
  <select class='form-control select2' name="" id="c3">
    <option value="" selected disabled hidden>Choose here</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>
     <option value="6">6</option>
     <option value="7">7</option>
  </select>
</div>
</div>




</div>
</div>


</div>

</div>


<div class='col-md-12'>
  <div class='box box-primary'>
    <div class='box-header with-border'>
      <h3 class='box-title'>Information of Person</h3>
    </div>

    <div class='form-group'>
      <div class='box-body rowClone2'>
        <div class=' row'>
          <div class=' col-sm-3'><label for="">Person 1</label></div>
        </div>
        <div class='row rowClone'>

          <div class='col-xs-6 col-md-3'>
            <input type="text" class="form-control">
          </div>
          <div class='col-xs-6 col-md-3'>

            <input type="text" class="form-control">
          </div>

          <div class='col-xs-6 col-md-3'>

            <input type="tel" class="form-control">
          </div>

          <div class='col-xs-6 col-md-3'>

            <input type="text" class="form-control">
          </div>


        </div>
        <br>
        <div class="row cloneHere">


        </div>


      </div>

【问题讨论】：

您的 html 非常损坏，有很多结尾的 div 标签，另一方面也缺少一些。您的选择器 .rowClone 将在每次迭代中选择更多元素，因为克隆的元素也有这个 css-class。
因为我从长代码复制
可能重复：stackoverflow.com/questions/55268627/…

标签： javascript jquery html

【解决方案1】：

您面临的问题来自这一行：var clone = $('.rowClone').clone();

第一个克隆很好，因为只有 1 个 .rowClone 存在，下次存在多个 .rowClone 并附加所有这些。

您有 2 个解决方案，使用 var clone = $('.rowClone:first').clone(); 或将 var clone = $('.rowClone').clone(); 移到您的 for loop 之前

问题的演示，运行它并查看控制台

$('#c3').change(function() {
  $('.cloneHere').empty();

  var count = $('#c3').val();
  for (i = 1; count > i; i++) {
    console.log("Number of .rowClone that exist = " + $('.rowClone').length)
    var clone = $('.rowClone').clone();
    $('.cloneHere').append(clone);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
  <label for="">count of person</label>
  <select class='form-control select2' name="" id="c3">
    <option value="" selected disabled hidden>Choose here</option>
    <option value="8">8</option>

  </select>
</div>


<div class='col-md-12'>
  <div class='box box-primary'>
    <div class='box-header with-border'>
      <h3 class='box-title'>Information of Person</h3>
    </div>

    <div class='form-group'>
      <div class='box-body rowClone2'>
        <div class=' row'>
          <div class=' col-sm-3'><label for="">Person 1</label></div>
        </div>
        <div class='row rowClone'>

          <div class='col-xs-6 col-md-3'>
            <input type="text" class="form-control">
          </div>
          <div class='col-xs-6 col-md-3'>

            <input type="text" class="form-control">
          </div>

          <div class='col-xs-6 col-md-3'>

            <input type="tel" class="form-control">
          </div>

          <div class='col-xs-6 col-md-3'>

            <input type="text" class="form-control">
          </div>


        </div>
        <br>
        <div class="row cloneHere">


        </div>


      </div>

    </div>


  </div>

</div>

【讨论】：