Question

我有这个包含两个选择标记的html代码。我想填充我的大学选择＆＃39;对应于＆＃39; departmentselect＆＃39;使用ajax。

HTML CODE 名称＆＃39; collegedepartment.html＆＃39;

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

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

是否有任何方法可以填充select标签的键值id =＆＃34; collegeselect＆＃34;从JSON文件中，然后在select标签中加载其部门列表的值id =＆＃34; departmentselect＆＃34; ？我不知道在这个过程中从哪里开始因为我对这种编程语言不熟悉并且我从中学习。

这是JSON文件 JSON FILE 名称＆＃39; CollegeAndDepartment.js＆＃39;

{
    "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 1

<强> Working example with local json variable

您可以使用getJSON()通过网址获取json：

$('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>" );
        });
    });
})

希望这有帮助。

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>

Answer 2

这是angularjs示例... script.js文件

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)];
} 

}

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>

如何使用JQUERY AJAX通过JSON FILE填充2个select标签？

2 个答案: