<select> that changes based on other <select> value

Question

Basically what I'm trying to do is change the options in <select> #2 based on the content of <select> and in turn that second <select> displays a third <select>

I've been breaking my head trying to use what I got from the answer in a previous question that I had asked where a <select> changes the page that is displaying using php. But when I tried to adapt it to what I want to do now but it won't work because first off I'd be placing a form within a form and that's not a good idea and secondly the method by which it changes the second set of content is by using onchange="this.form.submit() which submits the entire form instead of just changing the second content.

After doing some research I found similar queries on this site but the ones that I found were of people just wanting two sets of content which included countries and states and this wouldn't work for me because I need 3 sets of selects.

Here's what I need in a simplified way:

    <select name="topselect">
        <option>Select Something</option>
        <option value="1">Selecting this displays select1</option>
        <option value="2">Selecting this displays select2</option>
    </select>

---

    <select name="select1">
        <option>This displays sub1select1</option>
        <option>this displays sub1select2</option>
    </select>
         <select name="sub1select1">
             <option>La Dee Da</option>
             <option>La Dee Da</option>
         </select>
         <select name="sub1select2">
             <option>La Dee Da</option>
             <option>La Dee Da</option>
         </select>

---

    <select name="select2">
        <option>This displays sub2select1</option>
        <option>this displays sub2select2</option>
    </select>
         <select name="sub2select1">
             <option>La Dee Da</option>
             <option>La Dee Da</option>
         </select>
         <select name="sub2select2">
             <option>La Dee Da</option>
             <option>La Dee Da</option>
         </select>

I did find one way of doing this with jquery but it only shows how to do this with 2 <select>. I've tried to modify it to no avail. This is the code:

    $('select[name="topselect"]').change(function(){
        $('.hidden').hide();
        if(this.value == 1){
            $('select[name="select1"]').toggle();
        }
        else if(this.value == 2){
            $('select[name="select2"]').toggle();
        }
    });

I didn't include class="hidden" that would display:none the selects.

I appreciate the help! Thanks!

Answer 1

Also changed your HTML a bit. Streamlined. http://jsfiddle.net/mwk97/

jQuery

$('document').ready(function() {
    var currentList;    
    $('select[name="topselect"]').on('change', function () {
        $('select:not("[name=topselect]")').hide();
        currentList = this.value;
        $('select[name="select'+currentList+'"]').show();
    });
    $('.subselect').on('change', function() {
        $('.subsub').hide();
        var nameSelector = '[name="sub' + currentList + 'select' + this.value + '"]';
        $('select'+nameSelector).show();
    });
});

HTML

<select name="topselect">
    <option>Select Something</option>
    <option value="1">Selecting this displays select1</option>
    <option value="2">Selecting this displays select2</option>
</select>
<select name="select1" class="subselect">
    <option>Select Something</option>
    <option value="1">This displays sub1select1</option>
    <option value="2">this displays sub1select2</option>
</select>
<select name="sub1select1" class="subsub">
    <option>La Dee Da 11</option>
    <option>La Dee Da 11</option>
</select>
<select name="sub1select2" class="subsub">
    <option>La Dee Da 12</option>
    <option>La Dee Da 12</option>
</select>
<select name="select2" class="subselect">
    <option>Select Something</option>
    <option value="1">This displays sub2select1</option>
    <option value="2">this displays sub2select2</option>
</select>
<select name="sub2select1" class="subsub">
    <option>La Dee Da 21</option>
    <option>La Dee Da 21</option>
</select>
<select name="sub2select2" class="subsub">
    <option>La Dee Da 22</option>
    <option>La Dee Da 22</option>
</select>

And of course just a little...

CSS

.subselect { display: none; }
.subsub { display: none; }

Answer 2

Here's a start for you: jsFiddle example

I modified your HTML a bit to make it more intuitive. Here's the HTML and jQuery:

HTML

<select name="topselect">
    <option>Select Something</option>
    <option value="1">Selecting this displays select1</option>
    <option value="2">Selecting this displays select2</option>
</select>
<select name="select1" class="hidden_1">
    <option>Select Something</option>
    <option>This displays sub1select1</option>
    <option>this displays sub1select2</option>
</select>
<select name="sub1select1" class="hidden_2">
    <option>sub1select1 La Dee Da</option>
    <option>sub1select1 La Dee Da</option>
</select>
<select name="sub1select2" class="hidden_2">
    <option>sub1select2 La Dee Da</option>
    <option>sub1select2 La Dee Da</option>
</select>
<select name="select2" class="hidden_1">
        <option>Select Something</option>

    <option>This displays sub2select1</option>
    <option>this displays sub2select2</option>
</select>
<select name="sub2select1" class="hidden_2">
    <option>sub2select1 La Dee Da</option>
    <option>sub2select1 La Dee Da</option>
</select>
<select name="sub2select2" class="hidden_2">
    <option>sub2select2 La Dee Da</option>
    <option>sub2select2 La Dee Da</option>
</select>

jQuery

$('select[name="topselect"]').change(function () {
    $('.hidden, .hidden_1, .hidden_2').hide();
    if (this.value == 1) {
        $('select[name="select1"]').toggle();
    } else if (this.value == 2) {
        $('select[name="select2"]').toggle();
    }
});
$('select[name="select1"]').change(function () {
    $('.hidden_2').hide();

    if ($(':selected', this).index() == 1) {
        $('select[name="sub1select1"]').toggle();
    } else if ($(':selected', this).index() == 2) {
        $('select[name="sub1select2"]').toggle();
    }
});
$('select[name="select2"]').change(function () {
    $('.hidden_2').hide();

    if ($(':selected', this).index() == 1) {
        $('select[name="sub2select1"]').toggle();
    } else if ($(':selected', this).index() == 2) {
        $('select[name="sub2select2"]').toggle();
    }
});

Based on your exact needs I would imagine that this could be streamlined a bit.