How do I change the dropdown content based on the previous dropdowns selection?

Question

I'm assuming this is possible; I have two dropdowns in my html form, the first users select if they are 'support' or 'academic' staff the second they need to select which department they work for.

What I want to try and do is to only display the support departments when the support staff option is selected and the same for the academic departments with the academic staff.

I'm not sure where to start.

This is the code currently:

<select name="assessmenttype">
<option value="0" selected="selected">Please select</option>
<option value="1">Academic</option>
<option value="2">Support</option>
</select>

<select name="department">
<option value="0" selected="selected"> Please select</option>
<option value="42">Support</option>
<option value="1">Academic</option>
<option value="2">Support</option>
<option value="3">Academic</option>
</select>

.

Answer 1

JavaScript can handle this very easily,for example

document.getElementById("YOUR_ID_OF_THE_SELECT_TAG").appendChild(YOUR_OPTION_TAG);