Changing options in select box based on different select options

Issue

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>

Solution

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

Answered By - Felix Kling