How do I create a drop down list dependant on previous drop down and final choice displays text box

Question

How do I create a drop down list dependant on previous drop down and final choice displays text box?

EG 1st drop down has a choice of 1, 2 & 3. 2nd list had a choice of A,B,C if I chose 1 from previous, D, E, F if I chose 2, or X,Y, Z if I chose 3. Then if I chose any letter a text box displays with a message, (a different message for each letter choice)?

Hope this makes sense. Thanks.

Answer 1

Several different ways come to mind: (I will explain using Bootstrap examples, other frameworks can be used or you can write a custom HTML/CSS/JS for yourself)

Multiple Navigations: You select a tab in the 1st row then another row of selection appears below depending on what you selected in the top row. Repeat once more for the 3rd row.

see Bootstrap Navigation tabs/pills

Multiple dropdowns side by side left to right: You select 1st then when the user picks the value second one appears containing only options for that value and same goes for 3rd..

Bootstrap dropdowns with or without nesting

Multiple accordions: You have 3 levels of accordion nested in each other. As user picks one it expands revealing further options only available for that previous choice.

Bootstrap collapsable and accordion

Dropdown with an accordion with submenus: Elegant mix of 2 beforementioned, dropdown contains 2 levels of an accordion for every item. you need to redo the dropdown that it only closes when an item in 2nd level in accordion is selected

Nested dropdowns to left: nested dropdowns example

As for structuring the data I would go for nested objects (JSON like), you nest the 3rd selection into categories made of 2nd selection then altogather in 1st selection.

Answer 2

This is one of the ways in pure javascript. Look into this sample implementation for some guidance to proceed further.

1) Create necessary html markup with two select and one input.
2) Handle change event on first select.
3) In change event handler, set the selected index same as that of first and populate input control.

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