How to add Divs from a past Select number?

Question

You could help me with a problem I’m having?

Good people need to create a select with values from 1 to N numbers, after the user select a number in the select have to create n Divs from the selected value.

Follow the example not working ...

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

You can also see in the codepen: https://codepen.io/anon/pen/JZYdjv

Answer 1

You can loop with the select value.

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

Answer 2

It already has an answer that suits it in terms of solution, but it is always important to realize our mistakes so that we can evolve and not commit them in the future.

This is your Javascript code:

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

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

In fact it is very close to working as you want. The first problem comes in html in fact, because $("#area") does not hit the element that should because you defined it with a # the most:

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

Removing the # to stay id="area" already fills in the elements, according to what you select. But you end up not cleaning the previous ones every time you choose another option. You can do this by adding one $("#area").html(''); before the for.

The only thing missing is running the code as soon as it starts, which it can do with just one more instruction, after the code it already has:

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

The trigger programmatically force the event passed as parameter, in this case the change, as if the user did so.

See your code with these 3 small changes working:

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