Wie werden ausgewählte Optionen eines Arrays basierend auf einem ausgewählten Wert aufgefüllt?

Question

Ich versuche, die Optionen meines zweiten Auswahlelements aus einem Array basierend auf dem Wert des ersten Auswahlelements aufzufüllen. Ich kann nicht verstehen, warum es nur die Elemente aus dem Array des ersten Auswahlelements auffüllt. Ich weiß, dass appendChild verursacht, dass die Elemente bei Bedarf weitergeschaltet werden, aber ich habe versucht, die Variablen zu löschen, aber es scheint, dass die Optionselemente, die erstellt wurden, bleiben.

Jede Hilfe wäre großartig, danke!

<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

Diese Linie ist fischig:

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

Sie müssen das Element erhalten, wenn der Wert geändert hat, nicht beim Laden der Seite. Dann müssen Sie auch die Optionen bei Änderung entfernen, oder Sie erhalten eine sehr lange Liste, wenn der Benutzer mehrere Male auswählt. Verwenden Sie ein Objekt, um die Arrays zu speichern, was den späteren Zugriff wesentlich erleichtert. Verwenden Sie auch besser einen Event-Listener anstelle von Inline-Js (obwohl das hier nicht das Hauptproblem ist).

Try unten 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; 
}