How to add Divs from a past number of Select?

Question

How to add Divs from a past number of Select?

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Could you 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 has 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><selectid="qtdLote">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>


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

You can also see in codepen: link

javascript html jquery

asked by anonymous 01.06.2018 / 15:48

2 answers

1

You already have an answer that suits you 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>");
    }
 });

Actually, it's very close to being as you intended. The first problem comes in de facto html, because $("#area") does not hit the element you should because you defined it with # more:

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

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

The only thing that is missing is to run the code barely starts, which can only do one more instruction, after the code it already has:

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

The trigger programmatically forces the event passed as a parameter, in this case change , as if it had been the user to do 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><selectid="qtdLote">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<div id="area" ></div> <!-- id corrigido-->

01.06.2018 / 18:19

Unrecognized element (File download) Types of lines for publishers Primavera Software

score 1 · Accepted Answer

You can loop 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><selectid="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>