Question

如何根据之前的下拉菜单和最终选择显示文本框创建下拉列表？

E.G。第一次下拉可选择1,2和2。 3.第二个列表可以选择A，B，C，如果我选择前一个，D，E，F，如果我选择2，或者X，Y，Z，如果我选择3.那么如果我选择任何字母一个文本框显示带有消息（每个字母选择的不同消息）？

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

Answer 1

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

多次导航： 您在第1行中选择了一个选项卡，然后在下面显示另一行选择，具体取决于您在顶行中选择的内容。再次重复第三行。

请参阅Bootstrap Navigation tabs/pills

从左到右并排显示多个下拉列表 你选择1st然后当用户选择第二个值时，只显示该值的选项，同样适用于第三个..

Bootstrap dropdowns with or without nesting

多个手风琴： 你有3级手风琴互相嵌套。当用户选择一个时，它会扩展显示仅适用于之前选择的其他选项。

Bootstrap collapsable and accordion

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

左侧嵌套下拉列表： nested dropdowns example

至于构造数据我会选择嵌套对象（JSON之类），你将第三个选择嵌入到第二个选择的类别中，然后在第一个选择中进行altogather。

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" />

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

2 个答案: