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

Question

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

EG 1st下拉菜单可以选择1、2和3。如果我从上一个列表中选择1，则第二个列表可以选择A，B，C；如果我选择2，则选择D，E，F；如果我选择X，Y，Z选择3。然后，如果我选择了任何字母，则会显示一个带有消息的文本框（每个字母选择都显示不同的消息）？

希望这是有道理的。 谢谢。

Answer 1

我想到了几种不同的方式：（我将使用Bootstrap示例进行说明，可以使用其他框架，或者您可以自己编写自定义HTML / CSS / JS）

多个导航：您在第一行中选择一个标签，然后根据您在第一行中的选择在下方显示另一行选择。 对第三行再次重复一次。

参见引导导航标签/药丸

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

具有或不具有嵌套的Bootstrap下拉列表

多个手风琴：您有3个级别的手风琴相互嵌套。 当用户选择一个时，它会展开并显示仅适用于该先前选择的其他选项。

Bootstrap可折叠和手风琴

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

左侧的 嵌套下拉列表 ： 嵌套下拉列表示例

至于为嵌套对象（类似于JSON）提供的数据结构，您可以将第三个选择嵌套到由第二个选择组成的类别中，然后将其汇总到第一个选择中。

Answer 2

这是纯JavaScript的方法之一。 查看此示例实现以获取一些指导，以进一步进行操作。

1）用两个选择和一个输入创建必要的html标记。
2）在第一次选择时处理更改事件。
3）在change事件处理程序中，将选定的索引设置为与第一个相同，并填充输入控件。

 var first = document.getElementById('first'); var second = document.getElementById('second'); var third = document.getElementById('third'); first.addEventListener('change', handleChangeEvent); function handleChangeEvent() { var index = this.selectedIndex; second.selectedIndex = index; var inputValue = second.options[index].value; if(inputValue == 'A,B,C') { third.value = 'Red'; } else if (inputValue == 'D,E,F') { third.value = 'Blue'; } else { third.value = 'Green'; } } 

 <select id="first"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select id="second"> <option value="A,B,C">A,B,C</option> <option value="D,E,F">D,E,F</option> <option value="X,Y,Z">X,Y,Z</option> </select> <input type="text" id="third" />