1

Preciso criar um select com valores de 1 a N números. Após o usuário selecionar um número no select tenho que clonar a div lote a partir do valor selecionado.

Exemplo: se eu selecionar o numero 2 no select, tem que clonar duas divs. Se eu selecionar 1, clona só uma e se eu selecionar 3 clonar 3.

Segue um exemplo:

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

Ver no codepen.io

3
  • Luciano, sua pergunta está um pouco confusa. Seu exemplo parece já responder sua pergunta. O que exatamente você precisa fazer?
    – bio
    Commented 7/06/2018 às 13:51
  • Não entendi o que você está precisando exatamente, você só quer que o número do select possar ser dinâmico? por que já está clonando, porém sem sobrescrever o anterior. Commented 7/06/2018 às 13:52
  • Isso ele clona porém não sobrescreve, tem que ser dinâmico ex: selecionei 2 então tem que aparecer duas divs clonadas Commented 7/06/2018 às 13:53

2 Respostas 2

2

Amigo você estava num bom caminho com o uso de $("#grupo-lotes").html(''); só que a sua div lotes tem de estar fora de da div pai para poder ser utilizada novamente na clonagem, pois ela irá ser eliminada a cada evento

Aqui vai uma abordagem incompleta, falta inicializar a primeira chamada, que vou deixar par você resolver como "desafio":

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

Veja outro exemplo mais "simplificado":

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

2
  • 1
    Muuito Obrigado. Commented 7/06/2018 às 14:11
  • De nada, qualquer coisa que não tenha percebido diga para acrescentar. adicionei outro exemplo na resposta.
    – lazyFox
    Commented 7/06/2018 às 14:21
0

Sua resposta já foi conseguida, mas fiz um exemplo em PHP, neste que fiz utilizei um datalist, desta maneira o usuário pode criar quantos campos quiser.

<?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>';    
  }
?>
5
  • 2
    Não entendi porque utilizar um exemplo de php numa pergunta de javascript. Talvez pudesse acrescentar seu exemplo de datalist sem a necessidade de utilizar php.
    – bio
    Commented 7/06/2018 às 14:34
  • Não entendi por que você está reclamando sendo que a resposta em javascript já foi feita. Estou mostrando a ele uma outra opção que pode ser algo que talvez ele não usou por que não conhece. Commented 7/06/2018 às 14:43
  • 2
    Não estou reclamando, estou tentando ajudar a melhorar sua resposta, independente se há outra resposta ou não. Baseando sua resposta em "talvezes" é arriscado também, seria melhor tirar suas dúvidas com o AP. A pergunta possui as tags e linguagem de javascript, html, jquery e css (que também acho desnecessária). Em nenhum momento o AP questionou sobre php, afinal, não queremos que surjam respostas com exemplos em C#, ASP, Python, Ruby, etc...
    – bio
    Commented 7/06/2018 às 14:51
  • Entendo seu ponto, mas eu queria ajuda-lo porém não sei fazer o que ele precisa em JavaScript. Achei que seria valido responder mesmo assim, afinal diversas vezes que fiz perguntas me responderam utilizando linguagens diferentes e no final aprendi algo novo e resolvi meu problema. Commented 7/06/2018 às 14:55
  • Eu criei uma discussão no meta pra gente debater sobre isso. Olhando por este ponto de vista parece que não agi corretamente
    – bio
    Commented 7/06/2018 às 15:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .