Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Html and Javascript Help

So I'm new at html and javascript and 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 #3 appears based on the user's selection in dropdown menu #2 and 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".

Following the third-drop down menu would have options based upon the second-drop menu

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!

Note: I have some of the coping for when you have just two drop down menus, but how do you add another drop down menu to have in total 3 drop-down menus.

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