JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<select id="dropdown1" >
                                                                <option>--- Select Course --- </option>
                                                                <option value="HLTAID001-CPR">HLTAID001 - Provide Cardiopulmonary Resuscitation (CPR) </option>
                                                                <option value="22300VIC-CA">22300VIC - Course in First Aid Management of Anaphylaxis</option>
                                                                <option value="HLTAID003-FA">HLTAID003 – Provide First Aid</option>
                                                                <option value="22282VIC-CMA">22282VIC - Course in the Management of Asthma Risks and Emergencies in the Workplace</option>
                                                                <option value="HLTAID004-PEF">HLTAID004 – Provide an Emergency First Aid Response in an Education and Care Setting</option>
                                                                <option value="HLTAID001-EMN">HLTAID001 + Emergency Immunisation (Nurses)</option>
                                                            </select>
                                                            <select id="dropdown2" style="display: none">
                                                                <option value="Item 1">Item 1 </option>
                                                                <option value="Item 2">Item 2 </option>
                                                            </select>
                                                            <select id="dropdown3" style="display: none">
                                                                <option value="Item 3">Item 3 </option>
                                                                <option value="Item 4">Item 4 </option>
                                                            </select>
                                                          ...

JavaScript

$(document).ready(function(){
$("#dropdown1").change(function() {
    var control = $(this);
    
    if (control.val() == "HLTAID001-CPR") {
        $("#dropdown3").show();
        $("#dropdown2").hide();
         $("#dropdown4").hide();
         $("#dropdown5").hide();
         $("#dropdown6").hide();
         $("#dropdown7").hide();
    }
    
    else if (control.val() == "22300VIC-CA") {
        $("#dropdown2").show();
        $("#dropdown3").hide();
        $("#dropdown4").hide();
        $("#dropdown5").hide();
        $("#dropdown6").hide();
        $("#dropdown7").hide();
    }
    
    else if (control.val() == "HLTAID003-FA") {
        $("#dropdown4").show();
        $("#dropdown2").hide();
         $("#dropdown3").hide();
         $("#dropdown5").hide();
         $("#dropdown6").hide();
         $("#dropdown7").hide();
    } 
    else if (control.val() == "22282VIC-CMA") {
        $("#dropdown5").show();
        $("#dropdown2").hide();
         $("#dropdown3").hide();
         $("#dropdown4").hide();
         $("#dropdown6").hide();
         $("#dropdown7").hide();
    } 
    
    else if (control.val() == "HLTAID004-PEF") {
        $("#dropdown6").show();
        $("#dropdown2").hide();
         $("#dropdown3").hide();
         $("#dropdown4").hide();
         $("#dropdown5").hide();
         $("#dropdown7").hide();
    } 
    else if (control.val() == "HLTAID001-EMN") {
        $("#dropdown7").show();
        $("#dropdown2").hide();
         $("#dropdown3").hide();
         $("#dropdown4").hide();
         $("#dropdown5").hide();
         $("#dropdown6").hide();
    } 
    
    else { 
     $("#dropdown2").hide(); 
     $("#dropdown3").hide();
     $("#dropdown4").hide();
     $("#dropdown5").hide(); 
     $("#dropdown6").hide();
     $("#dropdown7").hide();
    }
    });
	});