带有onchange的Javascript动态下拉列表

我对JavaScript非常陌生。我试图创建动态下拉列表，即当您在第一个下拉列表中选择一个值时，第二个下拉列表会自动更新所选值的所有可能值，反之亦然

我可以用一种方法做这件事，但不能用另一种方法。请查看附件中我的代码截图。如有任何答复，我将不胜感激。谢谢

函数populates1，s2{ var s1=document.getElementByIds1； var s2=document.getElementByIds2； 如果s1.value={ 如果s1.value={ s2.innerHTML= }否则{ s1.innerHTML= } ifs1.value==雪佛兰{ var optionArray=[|，卡马罗|卡马罗，克尔维特|克尔维特，黑斑羚|黑斑羚]； }else ifs1.value==Dodge{ var optionArray=[|，复仇者|复仇者，挑战者|挑战者，充电器|充电器]； }else ifs1.value==福特{ var optionArray=[|，野马|野马，谢尔比|谢尔比]； } 期权数组中的forvar期权{ var pair=optionArray[option].split |； var newOption=document.createElementoption； newOption.value=pair[0]； newOption.innerHTML=pair[1]； s2.options.addnewOption； } } ifs2.value==Camaro | | s2.value==Corvette | | s2.value==Impala{ var optionArray1=[|，雪佛兰|雪佛兰]； }else ifs2.value==复仇者| | s2.value==挑战者| | s2.value==ImpChargerala{ var optionArray1=[|，道奇|道奇]； }否则，ifs2.value==Mustang | | s2.value==MuShelby{ var optionArray1=[|，道奇|道奇]； } 期权Array1中的forvar期权{ var pair=optionArray[option].split |； var newOption=document.createElementoption； newOption.value=pair[0]； newOption.innerHTML=pair[1]； s1.options.addnewOption； } } 选择你的车 选择汽车品牌： 雪佛兰 闪避 河流浅水处 选择车型： 卡马罗 闪避 黑斑羚 复仇者 闪避 挑战者 充电器 野马 谢尔比

---

希望这能解释很多。请参阅注释，了解某些部件为何以这种方式工作

这段代码可以更短，但我想说得更清楚。有关几乎所有JS特性的更多信息，请参阅。您可以通过谷歌搜索该功能的名称和类似MDN的数组MDN来查找该站点上的结果

常数 //标识DOM中我们需要的HTML元素 makesDropdown=document.getElementByIdmakesDropdown， modelsDropdown=document.getElementByIdmodelsDropdown， //将品牌和模型放入“cars”对象中以供参考 汽车={ 雪佛兰：[卡马罗，克尔维特，黑斑羚]， 道奇：[复仇者，挑战者，充电器]， 福特：[野马，谢尔比] } ; //当选择更改时调用相应的函数 makesDropdown.addEventListenerchange、updateModelsDropdown； modelsDropdown.addEventListenerchange、updateMakesDropdown； //定义侦听器函数 函数updateModelsDropdownevent{ 允许 //“change”事件的目标是更改的输入 thisMake=event.target.value， //从“cars”获取模型数组如果未选择make，则使用所有模型 相关车型=汽车[thisMake]| |获取所有车型； modelsDropdown.selectedIndex=0；//显示第一个空白选项 //选择元素的子元素是选项 让optionElements=modelsDropdown.children； 期权要素的forlet期权{ //使用CSS隐藏或取消隐藏HTML元素 option.classList.addhidden； //保留空白选项以及数组中包含的选项 如果相关模型.includeOption.value | | option.value=={ option.classList.removehidden； } } } 函数updateMakesDropdownevent{ 允许 thisModel=event.target.value， 相关品牌=， //获取对象的键数组 allMakes=Object.keyscars； //循环遍历键并测试每个对应的值，即每个模型数组 福莱特制造一切{ 让模型=汽车[制造]； //查找其值包含选定模型的键 ifmodels.includeThis模型{ //保存密钥的名称，以便我们可以在makesDropdown中选择它 相关制造=制造； } } 让optionElements=makesDropdown.children； forlet i=0；i发布一个你拥有的工作片段。屏幕截图并没有切掉它。@DCR已经编辑了这个问题以包含代码。如果以其他方式操作，是否意味着当您从所有品牌的所有模型列表中选择一个模型时，会自动填充品牌输入？您好，非常感谢您的回答。然而，我看到make下拉列表总是有所有的选项。是否有办法在“模型”下拉列表中仅保留与模型关联的make。我一整天都在努力想办法，但运气不好。为了回答你的问题，我知道这将是一个怎样的问题。我计划添加一个按钮来重置过滤器。没关系，我想出来了！！