How to clone Divs from a past number of Select?

Navigation
1

I need to create a select with values from 1 to N numbers. After the user selects a number in the select I have to clone the lote div from the selected value.

Example: if I select the number 2 in the select, you have to clone two divs. If I select 1, clone only one and if I select 3 clone 3.

Here's an example: 

$("#qtdLote").on("change",function(){
  
    var num=parseInt($(this).val());
    //$("#grupo-lotes").html(''); //limpar antes de gerar
    for(var i=1;i<=num;i++){
      $("#grupo-lotes").append($("#lote").clone());
    }
  
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><label>Escolha</label><selectid="qtdLote">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

<br />
<div id="grupo-lotes">
<div id="lote">
    <label>LOTE </label>
    <input type="">
</div>
</div>

See codepen.io

    
asked by anonymous 07.06.2018 / 15:38

2 answers

2

Friend you were on a good path with the use of $("#grupo-lotes").html(''); only that your% div must be outside of the parent div so that it can be used again in cloning, since it will be deleted every lotes

Here is an incomplete approach, it is not possible to initialize the first call, which I will let you resolve as a "challenge": 

$("#qtdLote").on("change",function(){
  
    var num=parseInt($(this).val());
    $("#grupo-lotes").html(''); //limpar antes de gerar
    for(var i=1;i<=num;i++){
      $("#grupo-lotes").append($("#lote").clone().show());
    }
  
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><label>Escolha</label><selectid="qtdLote">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

<br />
<div id="lote" style="display: none">
    <label>LOTE </label>
    <input type="">
</div>
<div id="grupo-lotes">


</div>

See another more "simplified" example: 

$("#qtdLote").on("change",function(){
  var num=parseInt($(this).val());
 
  
  var lote = $(".lote").last();
  $("#grupo-lotes").html('');
   
    for(var i=1;i<=num;i++){
      
      $("#grupo-lotes").append($(lote).clone());
    }
  
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><label>Escolha</label><selectid="qtdLote">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

<br />

<div id="grupo-lotes">
<div class="lote">
    <label>LOTE </label>
    <input type="">
</div>
</div>
    
07.06.2018 / 15:58
-1

Your response has already been achieved, but I've done an example in PHP, where I used a datalist, so the user can create as many fields as he wants. 

<?php
   echo'
   <div>
     <form method="post">
        <label>Escolha</label>
        <input list="qtd" name="quantidade"> 
        <datalist id="qtd" name="qtd">
            <option value="1"/>
            <option value="2"/>
            <option value="3"/>
        </datalist>
        <input type="submit" name="submit">
     </form>        
  </div>
  <br>';
  if(isset($_POST['submit']))
  {
      $qtd_sel = $_POST['quantidade'];
      echo '<div id="grupo-lotes">';
      while($qtd_sel > 0)
      {
          echo '
          <div id="lote">
             <label>LOTE </label>
             <input type="">
          </div>';
          $qtd_sel --;
      }
      echo '</div>';    
  }
?>
    
07.06.2018 / 16:28
Soft Scroll Bootstrap Problem not get using google API with Angular