JSFiddle - React, Tailwind, and code Playground

by Zakaria Acharki

HTML

<select id="collegeselect">
  <option value="College of CAS">College of CAS</option>
  <option value="College of CICCT">College of CICCT</option>
</select>
<br>
<select id="departmentselect"></select>

JavaScript

var data = {
    "College of CAS": ["Biology", "English", "LIACOM", "Library & Information Science", "Mass Communication", "Philosophy", "Political Science", "Psychology"],
    "College of CICCT": ["Associate in Computer Technology", "B.S. Computer Science", "B.S. Information System", "B.S. Information Technology"]
};

$('body').on('change','#collegeselect',function(){
    var selcted_college = $(this).val();
    
    $('#departmentselect').html('');
    
    $.each( data[selcted_college], function( key, val ) {
      $('#departmentselect').append("<option value='" + key + "'>" + val + "</option>" );
    });
})