選択値に基づいて配列から選択オプションを設定する方法はありますか？

Question

最初のselect要素の値に基づいて、2番目のselect要素のオプションを配列から取り込もうとしています。私は最初のselect要素の配列から項目を移入するだけの理由を理解できないようです。私は、appendChildがアイテムを必要に応じてタックし続けるのを知っていますが、変数をクリアしようとしましたが、作成されたオプション要素のようです。

ご協力いただきありがとうございます！

<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

この行は怪しいです：

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

あなたは価値がないページのロード時に、変更されたときに要素を取得する必要があります。変更のオプションも削除する必要があります。ユーザーが複数回選択すると非常に長いリストが表示されます。オブジェクトを使用して配列を格納すると、あとでアクセスするのがはるかに簡単になります。また、インラインjsの代わりにイベントリスナーを使用することをお勧めします（ただし、ここでの主な問題ではありません）。コードの下

試してみてください。

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