laurence keith albano laurence keith albano - 3 months ago 21
Ajax Question

How to populate 2 select tag using JQUERY AJAX through JSON FILE?

I have this html code that has two select tags. I want to populate my 'collegeselect' in corresponds to the 'departmentselect' using ajax.

HTML CODE name 'collegedepartment.html'

<html>
<title>College Life</title>
<body>
<select id="collegeselect" onchange=""myFunction()></select><br>

<select id="departmentselect"></select>
</body>
<script>
function myFunction()
{
}
</script>
</html>


Is there any way that you will populate the key value of the select tag id="collegeselect" from the JSON File and then it loads the value of its department list in the select tag id="departmentselect" ? I don't know where to start in the process cause I'm new to this programming language and I'm learning from it.

Here is the JSON File
JSON FILE name 'CollegeAndDepartment.js'

{
"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"],
"College of Commerce": ["Associate in Office Administration", "B.S. in Accountancy", "B.S. in Hotel and Restaurant Management", "B.S. Office Administration", "B.S. Tourism", "Business Administration", "Entrepreneurship", "Finance", "Human Resource Development", "Management", "Management Accounting", "Marketing"],
"College of Education": ["Bio-Chem", "Biology", "Computer Education", "English", "Filipino", "General Science", "Home Economics", "MAPE", "Mathematics", "Physical Education", "Science and Health", "Social Studies", "Values Education"],
"College of Engineering": ["B.S. Civil Engineering", "B.S. Computer Engineering", "B.S. Electrical Engineering", "B.S. Electronics & Communications Engineering", "B.S. Industrial Engineering", "B.S. Mechanical Engineering"],
"College of Law": ["Bachelor of Law"],
"College of Nursing": ["Associate in: Health Science Education", "B.S. Nursing"]
}

Answer

Working example with local json variable

You could use getJSON() to get the json by url :

$('body').on('change','#collegeselect',function(){
    var selcted_college = $(this).val();

    $('#departmentselect').html('');

    $.getJSON( "file.json", function( data ) {
        $.each( data[selcted_college], function( key, val ) {
            $('#departmentselect').append("<option value='" + key + "'>" + val + "</option>" );
        });
    });
})

Hope this helps.

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>" );
    });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="collegeselect">
  <option></option>
  <option value="College of CAS">College of CAS</option>
  <option value="College of CICCT">College of CICCT</option>
</select>
<br>
<select id="departmentselect"></select>