How to clone Divs from a past Select number?

Asked

Viewed 188 times

1

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

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

Follow 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>
  <select id="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 on the codepen.io

javascript html jquery css

  • Luciano, your question is a little confused. Your example seems to already answer your question. What exactly do you need to do?

  • I don’t understand what you’re needing exactly, do you just want the select number to be dynamic? why it is already cloning, but without overwriting the previous.

  • This it clones but does not overwrite, it has to be dynamic ex: I selected 2 then it has to appear two cloned Ivs

2 answers

2


Friend you were on a good path with the use of $("#grupo-lotes").html(''); only that your div lotes it must be outside the parent div in order to be used again in cloning, as it will be eliminated every evento

Here’s an incomplete approach, missing initialize the first call, which I’ll let you solve as "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>
  <select id="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 example more "simplified":

$("#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>
  <select id="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>

  • 1

    Muuito Obrigado.

  • You’re welcome, anything you haven’t noticed say to add. I’ve added another example to the reply.

0

Your answer has already been achieved, but I did an example in PHP, in this I used a datalist, so the user can create as many fields as you want.

<?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>';    
  }
?>
  • 2

    I didn’t understand why using a php example in a javascript question. Maybe you could add your example of datalist without the need to use php.

  • I don’t understand why you’re complaining that the javascript answer has already been done. I’m showing him another option that might be something that maybe he didn’t use because he doesn’t know.

  • 2

    I’m not complaining, I’m trying to help improve your answer, regardless of whether there’s another answer or not. Basing your response on "maybe" is risky too, it would be better to answer your questions with AP. The question has the tags and language of javascript, html, jquery and css (which I also find unnecessary). At no time did AP question about php, after all, we don’t want answers to come up with examples in C#, ASP, Python, Ruby, etc...

  • I understand his point, but I wanted to help him but I don’t know how to do what he needs in Javascript. I thought it would be valid to answer even so, after several times I asked questions answered me using different languages and in the end I learned something new and solved my problem.

  • I created a meta discussion for us to debate about it. Looking at this view it seems that I did not act correctly

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.