如何基於選擇值從數組中填充選擇選項？

Question

試圖讓我的第二個選擇元素的選項根據第一個選擇元素的值從數組中填充。 我似乎無法理解為什么它只填充第一個select元素數組中的項目。 我知道appendChild會導致需要繼續處理的項，但是我嘗試清除了變量，但是似乎保留了創建的option元素。

任何幫助將是巨大的，謝謝！

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