Javascript 如何根据选择值从数组中填充选择选项？

尝试获取第二个select元素的选项，以便根据第一个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>

这条线很可疑：

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

您需要在值更改时获取元素，而不是在页面加载时。然后您也需要删除更改时的选项，否则如果用户多次选择，您将得到一个很长的列表。使用一个对象来存储数组，这样以后就更容易访问它们了。此外，最好使用事件侦听器，而不是内联js，尽管这不是这里的主要问题

请尝试以下代码：

让模型={ audiModels:[TT，R8，A4，A6]， mercModels:[C230、B28、LTX]， BMW模型：[328355458i] } document.getElementById'makeSelect'。addEventListener'change'，e=>{ 设el=e.target； 设val=el.value+‘Models’； 让appendTo=document.getElementById'modelSelect'； 数组.fromappendTo.getElementsByTagName'option'.forEachc=>appendTo.removeChildc； if！models[val]| |！Array.isArraymodels[val]{ appendTo.style.display='none'； 回来 } 模型[val]。forEachm=>{ 让opt=document.createElement'option'； opt.textContent=opt.value=m； appendTo.appendChildopt； }; appendTo.style.display=； }; 梅赛德斯 奥迪 宝马

---

编辑您的问题并正确缩进代码如何？此变量“appendedModel”需要在函数内部刷新，以获取新的selectedMakevalue@ScottMarcus如何提供适当的反馈并推荐介绍缩进最佳实践的文档？@S.Morrison这就是谷歌的目的。我的反馈绝对恰当。如果你想从程序员那里得到编程方面的帮助，你有责任提出用基本标准编写的问题，这样你的问题就可以很容易地阅读和理解。代码缩进实际上是101种东西。你的问题的内容意味着你对编码有一定的了解，因此要求你这样做是非常合适的。我知道你从现在开始，我也知道为什么会这样。我认为这里的误解来自于你的问题的文本，这意味着你对编码有一定的理解，我也理解在提问之前应该遵循哪些准则。太棒了，这超出了回答我的问题的范围，同时将我推向了最佳实践的方向。非常感谢！不客气@S.Morrison。如果您需要解释这些线路的功能，请告诉我。如果答案对您有帮助，请将其标记为已接受。在查看此答案后，我对e=>{………return；}函数的运行情况有点困惑。我知道您正在抓取id为makeSelect的元素，并添加一个事件侦听器，以在makeSelect元素发生更改时执行包含的函数，但是为什么e=>，这是在计算makeSelect中包含的值？在那之后，你对函数中的变量m也做了同样的操作吗？没有@S.Morrison，那只是一个简单的例子。在这种情况下，它与函数e{………return；}@S.Morrison的作用相同，即更改事件。我获取了使用e.target更改makeSelect的元素。m是数组的一个元素，在forEach中一个接一个，例如TT代表Audi->TT