Question

We want to create a form which when an option is chosen in a select box, the options change in the other select box, depending on which is selected.

Example:

Select box 1
Option A
Option B

Select box 2
Options change depending on if A or B is chosen

How can we accomplish this?

Answer 1

There are a couple of ways, the specifics depend on if you want the options from the second select box to be called through Ajax or if there’s a set two possibilities.

HTML

<select id="select1">
    <option value="a">a</option>
    <option value="b">b</option>
</select>

<select id="select2a" style="display:none;">
    <!-- options -->
</select>

<select id="select2b" style="display:none;">
    <!-- options -->
</select>

jQuery

$('#select1').change(function(){

    if($(this).val() == "a"){

        $('#select2a').show();
        $('#select2b').hide();      

    }elseif($(this).val() == "b"){

        $('#select2a').hide();
        $('#select2b').show();  

    }

});

If you don’t want to use two seperate selectboxes, you could store the options within a variable and change the .html() of the selectbox depending on the option chosen in the first selectbox.