Selecting and Displaying data using DOM manipulations on select tag

so i have been trying to create a dyanmic time table where the admin can select the branch of the college and specific year as well as the section.( ps i need some help on that too). but when the user selects the options i want the system to automatically the display the subjects as well. im fairly new to webdev and i'd like your help. cheers [the timetable`

<select id="branch" name="BRANCH">
                  <option value="EXTC">EXTC</option>
                  <option value="IT">IT</option>
                  <option value="ELEC">ELEC</option>
                  <option value="MECH">MECH</option>
                  <option value="MTRX">MTRX</option>
                </select>
                <select id="year" name="YEAR">
                  <option value="SE">SE</option>
                  <option value="TE">TE</option>
                  <option value="BE">BE</option>
                </select>
                <select id="section" name="SECTION">
                  <option>A</option>
                  <option>B</option>
                  <option>C</option>
                </select>
               <div id="subjects"></div>     </div></div>  
</div>
 </body>
<script>
var branch = document.getElementById("branch").value;
var year = document.getElementById("year").value;
function IT(){
  if(branch === "IT" && year === "TE"){
    document.getElementById("subjects").innerHTML="the subjects for TE-IT are as follows: xyz"
  }
}

`]1