1

Poderiam me ajudar com um problema que estou tendo?

Bom gente preciso criar um select com valores de 1 a N numeros, após o usuário selecionar um numero no select tem que criar n divs a partir do valor selecionado.

Segue o exemplo não funcionando ...

$("#qtdLote").on("change",function(){
    var num=parseInt($(this).val());
    
    for(var i=1;i<=num;i++){ // se não houver valor o loop não roda.
      $("#area").append("<div> Div "+i+"</div>");
      // Append adiciona ao final do elemento desejado.
    }
    
 });
div{
  border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Escolha</label>
<select id="qtdLote">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>


<div id="#area" ></div>

Pode ver também no codepen: https://codepen.io/anon/pen/JZYdjv

2 Respostas 2

1

Você pode fazer um loop com o valor do select.

$(function(){
  // Use desta forma caso suas divs fiquem dentro de um elemento apenas para elas:
  $("#seletor").on("change",function(){
    var num=parseInt($(this).val());
    
    $("#area").html(""); // Limpar o elemento pai.
    
    for(var i=1;i<=num;i++){ // se não houver valor o loop não roda.
      $("#area").append("<div> Div "+i+"</div>");
      // Append adiciona ao final do elemento desejado.
    }
    
  });
    
  // Caso contrário você vai precisar identificar as divs criadas
  // como dar uma classe para elas. Vou colocar um exemplo abaixo.
  
  $("#seletor-com-classe").on("change",function(){
    var num=parseInt($(this).val());
    
    $(".criadoDinamicamente").remove(); // Remover divs.
    
    for(var i=1;i<=num;i++){ // se não houver valor o loop não roda.
      $("#area").append("<div class='criadoDinamicamente'> Div "+i+"</div>");
      // Append adiciona ao final do elemento desejado.
    }
    
  });
});
#area{
  display:flex;
  flex-flow: column;
}
#area div{
  flex-grow:1;
  padding:10px;
  border-radius:3px;
  background: #eaeaea;
  text-align:center;
  margin:0 0 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="seletor">
  <option value="">Quantas divs criar?</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="14">14</option>
</select>

<div id="area"></div>

3
  • Opa Henrique, Muito Obrigado pela ajuda mas esta quase certo, exemplo se ele escolheu 2 aparece 2, ai no caso se ele escolher 3 aparece 3 e se ele escolher 1 aparece só uma, ele mostra e esconde a partir do valor dado, pode me ajudar ? Commented 1/06/2018 às 14:01
  • Creio que entendi, editei o meu código ali para você ver como ficaria, tem 2 opções ali que podem lhe ser úteis Commented 1/06/2018 às 14:09
  • Caraaamba Henrique era isso Mesmo !!! Muuuito Obrigado mesmo. Commented 1/06/2018 às 14:12
1

Já tem uma resposta que lhe atende em termos de solução, mas é sempre importante percebermos os nossos erros para podermos evoluir e não os cometer no futuro.

Este é o seu código Javascript:

$("#qtdLote").on("change",function(){
    var num=parseInt($(this).val());

    for(var i=1;i<=num;i++){
      $("#area").append("<div> Div "+i+"</div>");
    }
 });

Na verdade tá muito perto de estar a funcionar como pretende. O primeiro problema vem no html de facto, pois $("#area") não acerta no elemento que devia porque você definiu ele com um # a mais:

<div id="#area" ></div>
<!--     ^          -->

Retirando o # para ficar id="area" já preenche os elementos, de acordo com o que seleciona. Mas acaba por não limpar os anteriores cada vez que escolhe outra opção. Pode fazer isso adicionando um $("#area").html(''); antes do for.

A unica coisa que fica a faltar é correr o código mal inicia, que consegue fazer apenas com mais uma instrução, apos o código que já tem:

$("#qtdLote").trigger("change");

O trigger força programaticamente o evento passado como parâmetro, neste caso o change, como se tivesse sido o usuário a faze-lo.

Veja o seu código com essas 3 pequenas alterações a funcionar:

$("#qtdLote").on("change",function(){
    var num=parseInt($(this).val());
    $("#area").html(''); //limpar antes de gerar
    for(var i=1;i<=num;i++){
      $("#area").append("<div> Div "+i+"</div>");
    }
 });
 
$("#qtdLote").trigger("change"); //forçar o trigger para quando abre a página
div{ border:1px solid #000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Escolha</label>
<select id="qtdLote">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<div id="area" ></div> <!-- id corrigido-->

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 .