how to create x amount of div on select option value

Question

this is my first question on here so ill try and be as detailed as possible! I am currently creating a HTML form with a select option with options 1 - 4. My aim is to use a Javascript function to create a certain amount of div's depending on which value the user has selected from the form.

For example, if the user has selected option 2, i want to auto generate 2 div containers. Then, if the user chooses to select another option after... the correct amount of divs will then be created.

My select HTML currently looks like this;

<select id="select_seasons">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
</select>

I have created a script which will create a div on button click but this isn't my aim;

var number = 2; 
document.getElementById('add').addEventListener('click', function( 
    ) { 
    var newDiv = document.createElement('div'); 
    newDiv.id = 'container'; 
    newDiv.innerHTML = "<label>Episode " + number + " name</label> <input type='text' name='episode'" + number +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
    document.getElementById('contain_form').appendChild(newDiv);
    number++; 
});

I would appreciate it if somebody was to help me with the JS i will need to make this functionality and i hope i've explained myself clearly enough in this post!

Feel free to comment and ask for me details if required.

Thanks in advance, Sam

how are you handling the change event of select_seasons? – JGV Oct 01 '15 at 20:18 — JGV, Oct 01 '15 at 20:18

score 2 · Accepted Answer · answered Oct 01 '15 at 20:22

You need to bind the change event on your select element. Something like this:

var divs = [];

document.getElementById('select_seasons').addEventListener('change', function(e) {
  var n = +this.value;
  for (var i = 0; i < divs.length; i++) {
    divs[i].remove();
  }
  divs = [];
  for (var i = 0; i < n; i++) {
    var d = document.createElement("div");
    d.className = "new";
    document.body.appendChild(d);
    divs.push(d);
  }
});

.new {
  background-color: red;
  width: 100px;
  height: 20px;
  margin: 1px;
}

<select id="select_seasons">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Tim · Answer 2 · 2015-10-01T20:48:25.640

You could use the selected value of the select element:

var number = select.options[select.selectedIndex].value;

For example:

var select = document.getElementById("select_seasons");
var button = document.getElementById("add");
var container = document.getElementById("container");

button.addEventListener("click", function () {
  
  // uncomment the following line if you want the remove the previously generated divs:
  //container.innerHTML = "";

  var number = select.options[select.selectedIndex].value;
  
  for (var i = 1; i <= number; i++) {
    
    var div = document.createElement("div");
    div.innerHTML = "div #" + i;
    container.appendChild(div);
  }
});

<select id="select_seasons">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<button id="add">Add</button>

<div id="container"></div>

@MattBurland He didn't ask for that. But I've added a option to remove them. — Tim, Oct 01 '15 at 20:49

Heitor Chang · Answer 3 · 2015-10-01T20:25:55.433

If I understood the question correctly, the seasons form should update and auto-fill with the select's number. Use the change event and refresh the form with the selected value.

 var selectSeasons = document.getElementById("select_seasons");
 selectSeasons.addEventListener('change', function() {
   populateForm(parseInt(this.value));
 });

 function populateForm(numberOfSeasons) {
   // first, remove all existing fields
   var containForm = document.getElementById("contain_form");
   while (containForm.firstChild) {
     containForm.removeChild(containForm.firstChild);
   }

   for (var i = 1; i <= numberOfSeasons; i++) {
     addDiv(i);
   }
 }

 function addDiv(number) {
   var newDiv = document.createElement('div');
   newDiv.id = 'container';
   newDiv.innerHTML = "<label>Episode " + number + " name</label> <input type='text' name='episode'" + number + " /> <label>Episode " + number + " embed</label> <input type='text' /> ";
   document.getElementById('contain_form').appendChild(newDiv);
   number++;
 }

Number of seasons:
<select id="select_seasons">
  <option value="0">Please make a selection</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<div id="contain_form"></div>

score 0 · Answer 4 · answered Oct 01 '15 at 20:22

Solution for your problem: http://jsfiddle.net/43ggkkg7/

    document.getElementById('select_seasons').addEventListener('change', function(){ 
        var container = document.getElementById('container');

        container.innerHTML = ''; //clear

        //Find selected option
        var n = 1;
        for(var i = 0; i < this.options.length; ++i){
            if(this.options[i].selected){
                n = ~~this.options[i].value; //Cast to int
                break;
            }
        }

        for(var i = 1; i <= n; ++i){ //Because we want to count from 1 not 0
            var newDiv = document.createElement('div'); 
            newDiv.id = 'element-' + i; 
            newDiv.innerHTML = "<label>Episode " + i + " name</label> <input type='text' name='episode[" + i +"]' /> <label>Episode " + i + " embed</label> <input type='text' /> ";

            container.appendChild(newDiv);
        }
    }); 

    //Emit event on page init
    document.getElementById('select_seasons').dispatchEvent(new Event('change'));

score 0 · Answer 5 · edited May 23 '17 at 12:14

I will help you to read this now, I don't need another loop to remove the old divs in the container, you can use innedHTML and set it to empty.

<select id="select_seasons">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

document.getElementById('select_seasons').addEventListener('change', function() { 
    var self = this,
    exisiting = document.getElementById('contain_form');

   //remove existing divs
    exisiting.innerHTML = '';

  for(i=1; i<= self.value; i++) {
     var newDiv = document.createElement('div'); 
     newDiv.id = 'container'; 
     newDiv.innerHTML = "<label>Episode " + i + " name</label> <input type='text' name='episode'" + i +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
  exisiting.appendChild(newDiv);
   }
});

Check this fiddle

how to create x amount of div on select option value

5 Answers5