Show a second dropdown based on previous dropdown selection

Solution 1:

One way or another, you've already ended up with what's probably the easiest HTML markup to use for the job:

<select size="1" id="Rank" title="" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="Airman">Airman</option>
    <option value="Airman First Class">Airman First Class</option>
    <option value="Senior Airman">Senior Airman</option>
    <option value="Staff Sergeant">Staff Sergeant</option>
    <option value="Senior Master Sergeant">Senior Master Sergeant</option>
</select>

and then one <element> container for each possibility of <option>.

<div>
    // For Airman
</div>
<div>
    // For Senior Airman
</div>

... etc etc...

I'd use this same layout for everything that depends on which <option> is selected; the unique-line-of-text you want, the other-select-box, etc etc. I'd wrap each one in a container element, so you can easily target all the elements as one.

<div class="container">
    <div>
        Line of text for Airman
    </div>
    <div>
        Line of text for Senior Airman
    </div>
</div>

<div class="container">
    <div>
        <select>
            <option>Airman Stuff</option>
        </select>
    </div>
    <div>
        <select>
            <option>Senior Airman Stuff</option>
        </select>
    </div>
</div>

Now whack a identifier to each of the <div>'s we've got, so when the "Airman" is selected, we know which <div>'s are the Airmans (so we know to show those ones!)

<div class="container">
    <div class="airman">
        Line of text for Airman
    </div>
    <div class="senior-airman">
        Line of text for Senior Airman
    </div>
</div>

<div class="container">
    <div class="airman">
        <select>
            <option>Airman Stuff</option>
        </select>
    </div>
    <div class="senior-airman">
        <select>
            <option>Senior Airman Stuff</option>
        </select>
    </div>
</div>

And add the same identifier to the <options>'s of the <select id="rank">:

<select size="1" id="Rank" title="" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="airman">Airman</option>
    <option value="senior-airman">Senior Airman</option>
</select>

Now we've got this markup, applying the JavaScript for the hiding/showing is so easy!

$(document).ready(function () {
    $('#Rank').bind('change', function () {
        var elements = $('div.container').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if somethings' selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change'); // Setup the initial states
});

Done; checkout an example: http://jsfiddle.net/3UWk2/1/

An update for your comment

The reason your attempt to change the code like you did didn't work is because we've currently got no event handler bound to the 2nd level <select> boxes; only to <select id="rank">

You need to basically repeat everything we've just done for the first level nav, for the second level nav. Instead of using an #id selector for the <select>, use a .class; because we've got more than one <select> element to target, and #id's have to be unique:

$('.second-level-select').bind('change', function () {
    var elements = $('div.second-level-container').children().hide(); // hide all the elements
    var value = $(this).val();

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
    }
}).trigger('change'); // Setup the initial states

We've also had to change the name of the div.container, to stop the <select> boxes hiding each others elements.

Check out an updated example here: http://jsfiddle.net/3UWk2/3/

Solution 2:

Wow that's a lot of code... but actually it was really easy to do with jQuery (if that's an option). See my example.

First thing you need to do is remove the spaces in the id's. That's generally bad. Secondly, you just show/hide based off of those values in the select list passing them as id's.

The jQuery (don't forget to include the jQuery link, though):

$("#Rank").change(function(){
   correspondingID = $(this).find(":selected").val()
   $(".style-sub-1").hide();
   $("#" + correspondingID).show();
})