如何根據前一個下拉列表和最終選擇顯示文本框創建下拉列表

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