Trying to pass array items to getElementById() select option in html form

Question

I have a dynamic radio option that triggers two different arrays to show in a drop down select.

https://jsfiddle.net/carvingpixel/5mcux28z/3/

<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-kits" name="option"   onclick="change(this)">Kits  
<input type="radio" id="radio-starLabs" name="option" onclick="change(this)">StarLabs
&nbsp;&nbsp;
<select id="arrays">
<option id="items"></option>
</select>    
</form>  

<script>
    var kits = ["Lego WeDo", "Force & Motion", "Bernoulli's Lift"];
    var starLabs = ["Constellations", "Starfields", "Moon"];

    function change(radio) {
        if (radio.checked && radio.id === "radio-kits") {

            for (var i = 0; i < kits.length; i++) {
                document.getElementById("items").innerHTML = kits[i];
            }
        } else {
            for (var i = 0; i < starLabs.length; i++) {
                document.getElementById("items").innerHTML = starLabs[i];
            }
        }
    }
</script>

I have most of it working but I am stuck on having each item of the array show in the list. Currently, it's showing the last item in the iteration rather than each item.

I'm slightly confused. `=` is assignment, not appending. And you are doing `document.getElementById("items").innerHTML = kits[i];`. So of course it's only going to be a single value. The last one. If you want append, that would be `+=` — Taplar, Jan 04 '19 at 16:07
Also a side note, don't repeat your lookups in a loop like that. Do the lookup outside the loop, put it in a variable, and use that variable in the loop. — Taplar, Jan 04 '19 at 16:08
Secondary side note, avoid inline bindings. Use `addEventListener()` instead. — Taplar, Jan 04 '19 at 16:09
Possible duplicate of [how to dynamically add options to an existing select in vanilla javascript](https://stackoverflow.com/questions/17730621/how-to-dynamically-add-options-to-an-existing-select-in-vanilla-javascript) — Chirag Ravindra, Jan 04 '19 at 16:09
@Taplar adding an event listener like the following, how would you pass along the radio selected of either kits or starlabs? `var el = document.getElementById("radio-buttons"); el.addEventListener("click", function(){change()}, false);` — loganpixel, Jan 04 '19 at 18:16
@loganpixel `this` will be the element that the event happend upon in the callback. — Taplar, Jan 04 '19 at 18:19

Orelsanpls · Accepted Answer · 2019-01-04T16:51:22.953

Your mistake was to work directly with one <option> when you should have worked with the <select> and multiple <option>.

In the following snippet, I am generating new options for each of the array entry, and then use innerHtml to attach them to the <select>.

const kits = ['Lego WeDo', 'Force & Motion', 'Bernoulli\'s Lift '];
const starLabs = ['Constellations', 'Starfields', 'Moon'];

// Function that is going to change the select options
function fillSelect(values) {
  document.getElementById("arrays").innerHTML =
    values.reduce((tmp, x) => `${tmp}<option>${x}</option>`, '');
}

function change(radio) {
  if (radio.checked && radio.id === 'radio-kits') {
    fillSelect(kits);
  } else {
    fillSelect(starLabs);
  }
}

<form name="frmRadio" id="radio-buttons" action="">
  <input type="radio" id="radio-kits" name="option" onclick="change(this)">Kits
  <input type="radio" id="radio-starLabs" name="option" onclick="change(this)">StarLabs &nbsp;&nbsp;
  <select id="arrays">
    <option id="items"></option>
  </select>
</form>

Thank you, Grégory NEUT! This also uses Tapler's suggestion of not repeating the loop by having a function. I can also easily add value to the options with this answer as well using the following ` ` — loganpixel, Jan 04 '19 at 17:52

score 2 · Answer 2 · answered Jan 04 '19 at 16:10

Each iteration you're replacing the previous value with the current value, so it's normal that the last value is the one being used. Also you need to use the id of the select and not that of the option to add more options...

So you have to do the following :

var kits = ["Lego WeDo", "Force & Motion", "Bernoulli's Lift"];
var starLabs = ["Constellations", "Starfields", "Moon"];

function change(radio) {
  document.getElementById("selectList").innerHTML = ""
  var select = document.getElementById("selectList")
  if (radio.checked && radio.id === "radio-kits") {
    for (var i = 0; i < kits.length; i++) {
     select.options[select.options.length] = new Option(kits[i]);
      
    }
  } else {
    for (var i = 0; i < starLabs.length; i++) {
     select.options[select.options.length] = new Option(starLabs[i]);
    }
  }
}

<div id="">
  <form name="frmRadio" id="radio-buttons" action="">
    <input type="radio" id="radio-kits" name="option" onclick="change(this)">Kits
    <input type="radio" id="radio-starLabs" name="option" onclick="change(this)">StarLabs &nbsp;&nbsp;
    <select id="selectList">
    </select>
  </form>
</div>

score -3 · Answer 3 · answered Jan 04 '19 at 16:11

var node = document.createElement("LI"); // Create a <li> node

  var textnode = document.createTextNode("Water"); // Create a text node

  node.appendChild(textnode); // Append the text to <li>

  document.getElementById("myList").appendChild(node); // Append <li> to <ul> with id="myList"

This should help you

Trying to pass array items to getElementById() select option in html form

3 Answers3