如何根據選擇值從數組中選擇選項？

試圖讓我的第二個選擇元素的選項根據第一個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>

來源

2017-07-07 S.M.

如何編輯你的問題，妥善縮進你的代碼？ –

這個變量'appendModel'需要在函數內部刷新以獲取新的selectedMake值 –

@ScottMarcus如何提供適當的反饋並推薦引入縮進最佳實踐的文檔？ –

此行是腥：

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>

來源

2017-07-07 19:53:18 baao

真棒，這超越了我的問題，同時推動我朝着最佳實踐的方向發展。萬分感謝！ –

不客氣@ S.Morrison。讓我知道你是否需要解釋線的功能。如果答案對您有幫助，請將其標記爲已接受。 – baao

在審查了這個之後，我對e => {... ... ... return; }函數。據我所知，您正在抓住元素爲「makeSelect」並添加一個事件偵聽器來執行「makeSelect」元素髮生更改時包含的函數，但爲什麼e =>計數「makeSelect 「？你在這個函數中對變量m做了同樣的處理嗎？ –

-1

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

來源

2017-07-07 20:06:29 nullqube

如何根據選擇值從數組中選擇選項？

回答

相關問題