How to create a drop-down menu that appears based on a response from another dropdown menu

Question

I am trying to create a page where users have to make several options based on each other. How to create a form so that a certain type of drop-down menu # 2 is displayed in the drop-down menu # 1.

For example, suppose a user selects a "product category" and a "product subcategory". If the user selects "bedding" from the first drop-down menu, a second drop-down menu appears with options for "bed, mattress, pillow".

In addition to this example, let's say the user chose “electronics” instead of “bedding.” Then the second drop-down menu will have options such as "tv, mp3 players, computers."

How could something like this be done? Is this what you are doing in HTML / CSS or in some other form?

Thanks for the help!

EDIT - I am using Django / Python to create this site along with HTML, CSS and Javascript.

Answer 1

You can use a combination of HTML and JavaScript ( JSFIDDLE ) :

<select id="opts" onchange="showForm()"> <option value="0">Select Option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <div id="f1" style="display:none"> <form name="form1"> <select id="opts" onchange="showForm()"> <option value="0">Select Option</option> <option value="1">Option 1A</option> <option value="2">Option 1B</option> </select> </form> </div> <div id="f2" style="display:none"> <form name="form2"> <select id="opts" onchange="showForm()"> <option value="0">Select Option</option> <option value="1">Option 2A</option> <option value="2">Option 2B</option> </select> </form> </div> <script type="text/javascript"> function showForm() { var selopt = document.getElementById("opts").value; if (selopt == 1) { document.getElementById("f1").style.display = "block"; document.getElementById("f2").style.display = "none"; } if (selopt == 2) { document.getElementById("f2").style.display = "block"; document.getElementById("f1").style.display = "none"; } if (selopt == 0) { document.getElementById("f2").style.display = "none"; document.getElementById("f1").style.display = "none"; } } </script> 

Answer 2

Like this? Created a js fiddle. http://jsfiddle.net/wigster/MeTQQ/

It captures the value of the drop-down list, and then, if it matches the rule, it displays another drop-down window, if it is not, hides this drop-down list.

Answer 3

If you want to use jQuery, you can use this test case: http://jsfiddle.net/exXmJ/

As I see, there are two ways. Delete the drop-down list and exchange it for a new one or hide / show two different drop-down lists. Alexander considered the second method, so I won’t go into it.