Dynamically changing dropdown options with other dropdown selection

Question

I am relatively new to php and especially the jquery aspect of it. What I want to do is have the user's selection on one dropdown box influence the options of the other box.

First Dropdown (input which changes second)

<select class="form-control" id="form" name="form" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>

Second Dropdown (options change depending on input in the first dropdown)

<select class="form-control" id="subject" name="subject" required>
<option value="English">English</option>
<option value="Maths">Maths</option>
<option value="Science">Science</option>
<option value="Geography">Geography</option>
<option value="History">History</option>
<option value="RS">RS</option>
<option value="BSEC">BSEC</option>
<option value="French">French</option>
<option value="German">German</option>
<option value="Spanish">Spanish</option>
<option value="Italian">Italian</option>
<option value="Latin">Latin</option>
<option value="Greek">Greek</option>
<option value="Art">Art</option>
<option value="3D Design">3D Design</option>
<option value="Drama">Drama</option>
<option value="Music">Music</option>
<option value="PE">PE</option>
</select>

Ideally, only options from English to Greek show up if the number selected is from 1 to 5 show up, but if 6 or 7 is selected, only options from Art to PE show up. I was told that this could be done in javascript or jquery but that jquery would be quicker. Please could you provide me with a solution that would do this if possible.

possible duplicate of [Jquery dependent drop down boxes populate- how](http://stackoverflow.com/questions/5910281/jquery-dependent-drop-down-boxes-populate-how) — Matthew Strawbridge, Apr 01 '14 at 20:34

score 1 · Accepted Answer · answered Apr 01 '14 at 22:12

This code will do the Job for you. It is not a clean code and I am sure there are some better ways to do it but this is a very simple way :

$("#form").change( function() {
    if ( parseInt($(this).val()) < 6 ) {
        $("#subject").html('                               \
            <option value="English">English</option>       \
            <option value="Maths">Maths</option>           \
            <option value="Science">Science</option>       \
            <option value="Geography">Geography</option>   \
            <option value="History">History</option>       \
            <option value="RS">RS</option>                 \
            <option value="BSEC">BSEC</option>             \
            <option value="French">French</option>         \
            <option value="German">German</option>         \
            <option value="Spanish">Spanish</option>       \
            <option value="Italian">Italian</option>       \
            <option value="Latin">Latin</option>           \
            <option value="Greek">Greek</option>           \
            ');
    } else {
        $("#subject").html('                                 \
            <option value="Art">Art</option>                 \
            <option value="3D Design">3D Design</option>     \
            <option value="Drama">Drama</option>             \
            <option value="Music">Music</option>             \
            <option value="PE">PE</option>                   \
            ');
    }
});

By the way Jquery has nothing to do with PHP. Jquery is a javascript library which runs on client side while PHP runs on the server side.

Dynamically changing dropdown options with other dropdown selection

1 Answers1