如何通过 JSON 文件使用 JQUERY AJAX 填充 2 个选择标签？答案

【问题标题】：How to populate 2 select tag using JQUERY AJAX through JSON FILE?如何通过 JSON 文件使用 JQUERY AJAX 填充 2 个选择标签？
【发布时间】：2016-12-25 12:09:35
【问题描述】：

我有这个有两个选择标签的 html 代码。我想使用 ajax 填充我的 'collegeselect' 对应于 'departmentselect'。

HTML 代码名称'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>

有什么方法可以从 JSON 文件中填充选择标签 id="collegeselect" 的键值，然后在选择标签 id="departmentselect" 中加载其部门列表的值？我不知道从哪里开始，因为我是这种编程语言的新手，我正在学习它。

这是 JSON 文件 JSON 文件 名称 '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"]
}

【问题讨论】：

你可以看看：stackoverflow.com/questions/18064666/…

标签： javascript jquery html json ajax

【解决方案1】：

Working example with local json variable

你可以使用getJSON()通过url获取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>

【讨论】：

【解决方案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>

【讨论】：

你能提供一个关于这个先生的 JSFIDDLE 吗？ AngularJS 也是一种有趣的语言。我也应该从中学习。谢谢