Dynamic list of options

Question

I am trying to create a dynamic list of options, I have an array where I contain the data I want. My idea is to make a for, giving it the length of the array and creating the options inside, but when doing so it doesn't work for me and it only creates an option.

addEventListener('load', inicio, false);

function inicio(){
var dato = document.getElementById("dato1").value;
var boton = document.getElementById("b_enviar");
var b_a = document.getElementById("b_crear");
var datos = new Array();

boton.addEventListener('click', function(){
    datos.push(document.getElementById("dato1").value);
    console.log(datos);
}, false);

b_crear.addEventListener('click', function(){
    var section1 = document.getElementById('section1');
    var section2 = document.getElementById('section2');
    var select = document.createElement('select');
    var option = document.createElement('option');
    
    var s1 = section1.appendChild(select);

    for (let index = 0; index < datos.length; index++) {
        s1.appendChild(option);
        console.log(index);
    }
    
}, false);
}

`s1.appendChild(option);` is appending the same option over and over again. Move for loop line above the option creation and add text and values to your options too — mplungjan, Jan 20 '21 at 13:39
Next time, please click edit, then `[<>]` snippet editor and provide a [mcve] with relevant HTML, script and CSS — mplungjan, Jan 20 '21 at 13:40
Additional to mplungjan's first comment, you probably want also to populate the newly-created options with data. You need to add `text` and `value` properties to the options too. — Teemu, Jan 20 '21 at 13:41
Also you want to clear the select before you append - otherwise it will append the array over and over for each click, making the select longer and longer with duplicate data — mplungjan, Jan 20 '21 at 13:44
Also `var s1 =` is not needed. You already have the `var select` you can use to append to — mplungjan, Jan 20 '21 at 13:45

score 0 · Answer 1 · answered Jan 20 '21 at 13:57

s1.appendChild(option); is appending the same option over and over again. Move for loop line above the option creation and add text and values to your options too
you want to clear the select or the container with the select before you append - otherwise it will append the array over and over for each click, making the select longer and longer with duplicate data
var s1 = is not needed. You already have the var select you can use to append to
you had var b_a = document.getElementById("b_crear"); but did not use it

So adding all the issues together we have something like this

The forEach is easier to read

function inicio() {
  var dato = document.getElementById('dato1').value;
  var boton = document.getElementById("b_enviar");
  var b_a = document.getElementById('b_crear');
  var datos = [];

  boton.addEventListener('click', function() {
    const val = document.getElementById('dato1').value; 
    if (!datos.includes(val)) datos.push(val);
  });

  b_a.addEventListener('click', function() {
    const section1 = document.getElementById('section1');
    section1.innerHTML="";
    const select = document.createElement('select');
    let option = document.createElement('option');    
    option.value = "";
    option.textContent = "Please select";
    select.appendChild(option);    
    datos.forEach((dato, index) => {
      option = document.createElement('option');
      option.value = dato;
      option.textContent = dato;
      select.appendChild(option);
    });
    section1.appendChild(select)
  })
}
window.addEventListener('load', inicio);

<input type="text" id="dato1">
<button id="b_enviar">Enviar</button>
<button id="b_crear">Crear</button>
<div id="section1"></div>

Dynamic list of options

1 Answers1