JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<select name="course" id="workshopcourseselect">
<option value="choosecourse">Select Course</option>
<option value="level4">BIFM Level 4</option>
<option value="level5">BIFM Level 5</option>
<option value="level6">BIFM Level 6</option>
</select><br/>
<select name="module" id="workshopmoduleselect">
<option value="choosecourse">Select Module</option>
<option value="401" class="l4workshopmods">FM4.01 Understanding FM</option>
<option value="402" class="l4workshopmods">FM4.02 FM Strategy</option>
<option value="403" class="l4workshopmods">FM4.03 People Management in FM</option>
<option value="404" class="l4workshopmods">FM4.04 Facilities Management Support Services Operations</option>
<option value="405" class="l4workshopmods">FM4.05 Health & Safety</option>
<option value="409" class="l4workshopmods">FM4.09 Performance Measurement in FM</option>
<option value="415" class="l4workshopmods">FM4.15 Managing Customer Service in FM</option>
<option value="417" class="l4workshopmods">FM4.17 Property, Fabric & Building Services Maintenance</option>
<option value="419" class="l4workshopmods">FM4.19 Sustainability & Environmental Issues</option>
<option value="421" class="l4workshopmods">FM4.21 Procurement & Contract Management for FMs</option>
<option value="501" class="l5workshopmods">FM5.01 FM Development & Trends</option>
<option value="502" class="l5workshopmods">FM5.02 Organisational & FM Strategy</option>
<option value="503" class="l5workshopmods">FM5.03 Managing People in FM</option>
<option value="504" class="l5workshopmods">FM5.04 Risk Management in FM</option>
<option value="505" class="l5workshopmods">FM5.05 Financial Management in FM</option>
<option value="511" class="l5workshopmods">FM5.11 Managing FM Projects</option>
<option value="516" class="l5workshopmods">FM5.16 Propert & Asset Management in FM</option>
<option value="521" class="l5workshopmods">FM5.21 Managing Procurement & Contracts in...
JavaScript
var l4 = $("#workshopmoduleselect .l4workshopmods").detach();
var l5 = $("#workshopmoduleselect .l5workshopmods").detach();
var l6 = $("#workshopmoduleselect .l6workshopmods").detach();
var def = $("#workshopmoduleselect option"); // everything else. Don't detach.
$('#workshopcourseselect').change(function() {
var level = $(this).val();
var menu = $('#workshopmoduleselect');
menu.empty();
if (level == "level4")
menu.append(l4);
else if (level == "level5")
menu.append(l5);
else if (level == "level6")
menu.append(l6);
else
menu.append(def);
});