Comment remplir les options de sélection d'un tableau en fonction d'une valeur de sélection?

Question

Essayer d'obtenir les options de mon second élément select à remplir à partir d'un tableau basé sur la valeur du premier élément select. Je n'arrive pas à comprendre pourquoi il ne remplit que les éléments du tableau du premier élément sélectionné. Je sais que appendChild fait en sorte que les items continuent de coller au besoin, mais j'ai essayé d'effacer les variables, mais il semble que les éléments d'option qui ont été créés restent.

Toute aide serait formidable, merci!

<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

Cette ligne est fishy:

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

Vous devez obtenir l'élément lorsque la valeur a changé, pas la charge de page. Ensuite, vous devez également supprimer les options de modification, ou vous obtiendrez une très longue liste si l'utilisateur sélectionne plusieurs fois. Utilisez un objet pour stocker les tableaux, ce qui facilite beaucoup l'accès ultérieur. Mieux vaut également utiliser un écouteur d'événement au lieu de js en ligne (bien que ce ne soit pas le problème principal ici).

Essayez ci-dessous le 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>

Answer 2

var info = { 
    "audi" : ["TT", "R8", "A4", "A6"], 
    "merc" : ["C230", "B28", "LTX"], 
    "bmw" : ["328", "355", "458i"] 
}; 

var selectedMake = document.getElementById("makeSelect"); //grabs the make select 
var selectedModel = document.getElementById("modelSelect"); //grabs the model select 

function modelAppend() { 
    var htmlModels = info[selectedMake.value].map(function(l) { 
     return '<option value="' + l + '">' + l + '</option>'; 
    }); 
    selectedModel.innerHTML = htmlModels; 
}