如何通過JSON文件使用JQUERY AJAX填充2選擇標記？

我有這個html代碼有兩個選擇標籤。我想用ajax填充我的'collegeselect'對應'departmentselect'。如何通過JSON文件使用JQUERY AJAX填充2選擇標記？

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>

有什麼辦法，你將填充選擇標籤ID =「collegeselect」的鍵值從JSON文件，然後將其在選擇標記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"] 
}

來源

2016-08-18 laurence keith albano

您不妨來看看點擊：http：/ /stackoverflow.com/questions/18064666/update-div-with-jquery-ajax-response-html – JonSG

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>

來源

2016-08-18 14:13:21

這是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>

來源

2016-08-18 14:53:22

你能提供這個先生的JSFIDDLE嗎？ AngularJS也是一種有趣的語言。我也應該從中學習。謝謝 –

這裏是plunker鏈接http://plnkr.co/edit/R1edgXY62uPTMWxF3gUO?p=preview –

非常感謝。 :) –

如何通過JSON文件使用JQUERY AJAX填充2選擇標記？

回答

相關問題