How to create dropdown menu that appears based on answer from another dropdown menu

Question

I'm trying to create a page where you users have to make multiple selections that are based on each other. How do you create a form such that a specific type of dropdown menu #2 appears based on the user's selection in dropdown menu #1.

For example, lets say a user has to choose a "product category" and a "product subcategory". If a user chooses "bedding" from the first drop down menu, a second drop-down menu automatically appears with choices like "bed, mattress, pillow".

To further this example, lets say the user chose "electronics" instead of "bedding." Then the second-drop down menu would have choices like "tv, mp3 players, computers".

How would one go about doing something like that? Is it something you would do in HTML/CSS or some other form?

Thanks for the help!

EDIT - I'm using Django / Python to construct this website along with HTML, CSS, and Javascript.

Solution 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>

Solution 2

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

It grabs the value of the drop down box, and then if it matches the rule, it'll set the other drop-down box to show, if not, keeps that other drop-down box hidden.

Solution 3

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

The way I see it there are two ways to go. Delete the dropdown and exchange it for a new one, or hide/show two different dropdowns. Alexander covered the second method so I won't go into that.