Javascript 如何根据上一个下拉列表和最终选择显示文本框创建下拉列表

如何根据上一个下拉列表和最终选择显示文本框创建下拉列表

例如，第一个下拉列表可选择1、2和3。如果我从前面的列表中选择1，第二个列表可以选择a、B、C；如果我选择2，可以选择D、E、F；如果我选择3，可以选择X、Y、Z。然后，如果我选择了任何一个字母，文本框会显示一条消息（每个字母选择的消息不同）

---

希望这是有意义的。谢谢

我想到了几种不同的方法： （我将使用引导示例进行解释，可以使用其他框架，也可以自己编写自定义HTML/CSS/JS）

多个导航： 您在第一行中选择一个选项卡，然后根据您在顶行中选择的内容在下面显示另一行选择。对第三行重复一次

看

从左到右并排显示多个下拉列表： 您选择第一个，然后当用户选择值时，第二个出现，仅包含该值的选项，第三个也一样

多个手风琴： 您有三个层次的手风琴相互嵌套。当用户选择一个选项时，它会展开，显示出仅适用于前一个选项的更多选项

带有子菜单的手风琴下拉菜单： 前面提到的2个元素的优雅组合，下拉列表包含每个项目的2个级别的手风琴。您需要重做下拉列表，使其仅在选择手风琴第二级中的项目时关闭

左侧嵌套下拉列表：

---

至于构造嵌套对象（类似JSON）的数据，您可以将第三个选择嵌套到由第二个选择组成的类别中，然后在第一个选择中替换它。

这是纯javascript中的一种方法。查看此示例实现以获得进一步操作的指导

1） 使用两个选择和一个输入创建必要的html标记。
2） 在第一次选择时处理更改事件。
3） 在

change

事件处理程序中，将所选索引设置为与第一个索引相同的索引，并填充输入控件

var first=document.getElementById（'first'）；
var second=document.getElementById（'second'）；
var third=document.getElementById（'third'）；
首先，addEventListener（'change'，handleChangeEvent）；
函数handleChangeEvent（）{
var指数=此。选择的指数；
second.selectedIndex=索引；
var inputValue=second.options[index].value；
如果（inputValue=='A，B，C'）{
第三个值='红色'；
}else if（inputValue='D，E，F'）{
third.value='蓝色'；
}否则{
第三，值='绿色'；
}
}

1.
2.
3.
A、 B，C
D、 E，F
十、 Y，Z

请澄清您的输出是什么样子的？在HTML页面上，显示1个下拉列表，然后在进行选择后显示第2个下拉列表，然后显示一条消息。最后你会看到两个下拉列表和一个文本框。文本框显示什么？任何文本消息。我希望它显示在文本框中，而不是作为警报。这看起来很棒。。。。这几乎是我想要的，但不是文本框中显示的第二个选项的值，而是如何显示消息。例如我选择选项1，但我可以选择A、B或C，然后，当我选择A时，一条消息显示为“红色”。如果我选择B，则会显示另一条消息，例如“绿色”，而对于C，则可能会显示“黄色”？这看起来很棒。。。。这几乎是我想要的，但不是文本框中显示的第二个选项的值，而是如何显示消息。例如我选择选项1，但我可以选择A、B或C，然后，当我选择A时，一条消息显示为“红色”。如果我选择B，则会显示另一条消息，例如“绿色”，而对于C，则可能会显示一条消息“黄色”？？@StevieM您不能单独选择“a”、“B”或“C”。如果您愿意，那么您的选项必须分别为“A”、“B”或“C”，而不是

A、B、C

。对不起。我真的很感谢你的帮助，很抱歉我没有解释清楚！！我可以从下拉列表中找出选项，但你能帮我完成最后阶段吗？对于从第二个下拉列表中选择的每个不同选项，文本框中会显示不同的消息。@StevieM您有

second.options[index].value

。使用if/else if/else将不同的值写入输入控件。假设（value='A，B，C'）third.value='Red.@StevieM查看我编辑的代码并运行它。这应该给你一个主意！