Changing options in select box based on different select options

Question

I have 2 select options. I want to change the drop down options in second select options based on what I select in first select options. How do I do that in jquery?

<select id="Manage">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
<select>

Second select option if A is selected from first select option

<select id='selectA'>
   <option value="1">1</option>
   <option value="2">2</option>
</select>

Now if B is selected from first select option

<select id='selectA'>
   <option value="3">3</option>
   <option value="4">4</option> 
</select>

Answer 1

Something like:

$('#Manage').change(function() {
    var options = '';
    if($(this).val() == 'a') {
        options = '<option value="1">1</option><option value="2">2</option>';
    }
    else if ($(this).val() == 'b'){
        options = '<option value="3">3</option><option value="4">4</option>';
    }

    $('#selectA').html(options);
});

Of course you can have your options e.g. stored in an array and combine them on fly or whatever, that is up to you.

Reference: .change(), .val()

Answer 2

You can so that with 3 diffrent techniques:

1. You load the options for the second select with AJAX as soon as the first was selected
2. You save all options for the second select in a JSON object and then include it after the first one was selected
3. You predefine all select and show/hide AND disable/enable the other selects

The first is probably the best as you can get values from a database depending on the users fisrt choice and you can build the hole select server side.