How to populate select options from an array based on a select value?

Question

Trying to get my second select element's options to populate from an array based on the value of the first select element. I can't seem to understand why it only populates the items from the array of the first select element. I know the appendChild is causing the items to keep tacking on at the need, but I've tried to clear the variables, but it seems the option elements that were created stay.

Any help would be great, thanks!

<select id="makeSelect" onChange="modelAppend()">
    <option value="merc">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
</select>

<select id="modelSelect">

</select>

<script>
var audiModels = ["TT", "R8", "A4", "A6"]; //audimodels
var mercModels = ["C230", "B28", "LTX",]; //mercmodels
var bmwModels = ["328", "355", "458i",]; //bmwmodels
var selectedMake = document.getElementById("makeSelect"); //grabs the make select
var selectedModel = document.getElementById("modelSelect"); //grabs the model select
var appendedModel = window[selectedMake.value + "Models"]; // appends "Models" to selectedMake.value and converts string into variable

function modelAppend() {
    for (var i = 0; i < appendedModel.length; i ++) { // counts items in model array
        var models = appendedModel[i]; // // sets "models" to count of model array
        var modelOptions = document.createElement("option"); //create the <option> tag
        modelOptions.textContent = models; // assigns text to option
        modelOptions.value = models; // assigns value to option
        selectedModel.appendChild(modelOptions); //appeneds option tag with text and value to "modelSelect" element
    }
}

</script>

Answer 1

This line is fishy:

var appendedModel = window[selectedMake.value + "Models"];

You need to get the element when the value has changed, not on page load. Then you need to remove the options on change too, or you will get a very long list if the user selects multiple times. Use an object to store the arrays, that makes it much easier to access them later. Also better use an event listener instead of inline js (though that's not the main problem here).

Try below code:

 let models = { audiModels: ["TT", "R8", "A4", "A6"], mercModels: ["C230", "B28", "LTX"], bmwModels: ["328", "355", "458i"] } document.getElementById('makeSelect').addEventListener('change', e => { let el = e.target; let val = el.value + 'Models'; let appendTo = document.getElementById('modelSelect'); Array.from(appendTo.getElementsByTagName('option')).forEach(c => appendTo.removeChild(c)); if (!models[val] || !Array.isArray(models[val])) { appendTo.style.display = 'none'; return; } models[val].forEach(m => { let opt = document.createElement('option'); opt.textContent = opt.value = m; appendTo.appendChild(opt); }); appendTo.style.display = ''; }); 

 <select id="makeSelect"> <option value=""></option> <option value="merc">Mercedes</option> <option value="audi">Audi</option> <option value="bmw">BMW</option> </select> <select id="modelSelect" style="display:none"> </select>