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

Question

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"]
}

You might take a look at: http://stackoverflow.com/questions/18064666/update-div-with-jquery-ajax-response-html — JonSG, Aug 18 '16 at 14:07

score 2 · Accepted Answer · answered Aug 18 '16 at 14:13

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>

score 2 · Answer 2 · answered Aug 18 '16 at 14:53

this is the angularjs example...script.js file

function MyCntrl($scope) {
  $scope.prop = {
"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"]
};

$scope.abc = "";
$scope.def = "";

$scope.keys = [];
$scope.values = [];
$scope.value = [];

for (var i in $scope.prop) {
    $scope.keys.push(i);
    $scope.values.push($scope.prop[i]);
}

$scope.myfunction = function(asdf) {
    $scope.value = $scope.values[$scope.keys.indexOf(asdf)];
} 

}

The html

<html ng-app>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script src="script.js"></script>

</head>

<body>

  <div ng-controller="MyCntrl">
<select ng-model="abc" ng-options="v for v in keys" ng-change="myfunction(abc)">
</select>

<select ng-model="def" ng-options="v for v in value">
</select>

<br> {{def}}

</div>


</body>

</html>

Can you provide a JSFIDDLE on this sir? AngularJS is also an interesting language. I should learn from it also. Thanks — laurence keith albano, Aug 18 '16 at 14:56

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

2 Answers2