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

HTML

Posted by Shane Riddle
Shane Riddle
11,087 Points

Dependent Select tags

I have looked from one end of the web to the other trying to get my question answered. I am probably overlooking something, but here goes. I am trying to make one select tag dependent upon the first but it doesn't appear to be working. Some of my code is ex.

    <!--        <label for="State">State</label>
            <select id="State" name="user_state">
                <optgroup label="state">
                    <option value="Alabama">Alabama</option>
                    <option value="Alaska">Alaska</option>
                    <option value="Arizona">Arizona</option>
                    <option value="Arkansas">Arkansas</option>
                    <option value="California">California</option>
                    <option value="Colorado">Colorado</option>
                    <option value="Connecticut">Connecticut</option>
                    <option value="Delaware">Delaware</option>
                    <option value="Florida">Florida</option>
                    <option value="Georgia">Georgia</option>
                    <option value="Hawaii">Hawaii</option>
                    <option value="Idaho">Idaho</option>
                    <option value="Illinois">Illinois</option>
                    <option value="Indiana">Indiana</option>
                    <option value="Iowa">Iowa</option>
                    <option value="Kansas">Kansas</option>
                    <option value="Kentucky">Kentucky</option>

closing tags

            <label for="County">County</label>
            <select id="county" name="user_county">
                <optgroup label="county">
                   <option value="Adair">Adair</option>
                   <option value="Allen">Allen</option>
                   <option value="Anderson">Anderson</option>
                   <option value="Ballard">Ballard</option>
                   <option value="Barren">Barren</option>
                   <option value="Bath">Bath</option>
                   <option value="Bell">Bell</option>

-->

I am sure there is an easier way to do this but I want to know how to do it with HTML basically i wold like to be able to select "Kentucky" in the first drop down and have the counties I have listed for Kentucky to populate in the next dropdown. I am pretty sure this has something to do with the "select" and it will come as ease to someone more experienced, but I am still learning. Thank you

3 Answers

Sahil Prajapati
Sahil Prajapati
8,524 Points
Sahil Prajapati
Sahil Prajapati
8,524 Points

Yes its a lot easier with Javascript /jQuery. You can group the counties in the second select tag using the optgroup and then hide them until they are selected in the first select list. Came up with this. Its just an example.

html
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#county optgroup').hide();
        $('#State').change(function(){
            var text= $(this).val();
                $('#county optgroup').hide();   
                $('#county').val('');
                $('#county optgroup[label="'+text+'"]').css({'display':'block'});

        });
    });
</script>
</head>
<body>
    <select id="State" name="user_state">
                <optgroup label="state">
                    <option value="Alabama">Alabama</option>
                    <option value="Alaska">Alaska</option>
                    <option value="Arizona">Arizona</option>
                    <option value="Arkansas">Arkansas</option>
                    <option value="California">California</option>
                    <option value="Colorado">Colorado</option>
                    <option value="Connecticut">Connecticut</option>
                    <option value="Delaware">Delaware</option>
                    <option value="Florida">Florida</option>
                    <option value="Georgia">Georgia</option>
                    <option value="Hawaii">Hawaii</option>
                    <option value="Idaho">Idaho</option>
                    <option value="Illinois">Illinois</option>
                    <option value="Indiana">Indiana</option>
                    <option value="Iowa">Iowa</option>
                    <option value="Kansas">Kansas</option>
                    <option value="Kentucky">Kentucky</option>
                </optgroup>
             </select>
       <select id="county">
       <optgroup label="Kentucky">
                  <option value="Adair">Adair</option>
                   <option value="Allen">Allen</option>
                   <option value="Anderson">Anderson</option>
                   <option value="Ballard">Ballard</option>
                   <option value="Barren">Barren</option>
                   <option value="Bath">Bath</option>
                   <option value="Bell">Bell</option>
       </optgroup>
       <optgroup label="Hawaii">
                    <option value="Hawaii">Hawaii</option>
                    <option value="Idaho">Idaho</option>
                    <option value="Illinois">Illinois</option>
                    <option value="Indiana">Indiana</option>
                    <option value="Iowa">Iowa</option>
                    <option value="Kansas">Kansas</option>
       </optgroup>
       </select>             
</body>
</html>
Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

This can't be done with HTML alone. You are going to need to use JavaScript/jQuery to add an event listener to the select list. That way when they select a state you can either show or populate the second select list.

Shane Riddle
Shane Riddle
11,087 Points
Shane Riddle
Shane Riddle
11,087 Points

Thank you for your time it is appreciated. Time to dive deeper into Java.

Bill Hinostroza
Bill Hinostroza
19,273 Points
Bill Hinostroza
Bill Hinostroza
19,273 Points

Careful Java is different from Javascript but yeah you need Javascript or jQuery for this.