abstract：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>三級(jí)聯(lián)動(dòng)</title></head><body>系名 <select
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三級(jí)聯(lián)動(dòng)</title>
</head>
<body>
系名 <select name="" id="dep">
<option value="">-- 請選擇系名 --</option>
</select>
年級(jí) <select name="" id="grade">
<option value="">-- 請選擇年級(jí) --</option>
</select>
班級(jí) <select name="" id="class">
<option value="">-- 請選擇班級(jí) --</option>
</select>
<p id="tips" style="color: #99a5ff"></p>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(function () {
//獲取一級(jí)列表的內(nèi)容
$.getJSON('data.json',function (data) {
let option = '<option value="">-- 請選擇系名 --</option>';
$.each(data,function(i){
//選擇出一級(jí)列表
if (data[i].pId === 0){
option += '<option value="'+data[i].id+'">'+data[i].depName+'</option>';
}
});
//添加到select內(nèi)
$('#dep').html(option);
});
//當(dāng)選擇一級(jí)列表的某個(gè)選項(xiàng)，獲取該選項(xiàng)的二級(jí)列表的內(nèi)容
$('#dep').change(function(){
//選擇完成，添加到提示內(nèi)
$('#tips').html('已選擇：' + $(this).find(':selected').text());
$.getJSON('data.json',function(data){
let option = '<option value="">-- 請選擇年級(jí) --</option>';
$.each(data,function(i){
// 獲取二級(jí)列表
if (data[i].pDepId === parseInt($('#dep').val())) {
option += '<option value="'+data[i].gradeId+'">'+data[i].gradeName+'</option>';
}
});
$('#grade').html(option);
});
});
//當(dāng)選擇二級(jí)列表的某個(gè)選項(xiàng)，獲取該選項(xiàng)的三級(jí)列表的內(nèi)容
$('#grade').change(function(){
$('#tips').append('----' + $(this).find(':selected').text());
$.getJSON('data.json',function(data){
let option = '<option value="">-- 請選擇班級(jí) --</option>';
$.each(data,function(i){
// 獲取三級(jí)列表
if (data[i].pGradeId === parseInt($('#grade').val())) {
option += '<option value="'+data[i].classId+'">'+data[i].className+'</option>';
}
});
$('#class').html(option);
});
});
$('#class').change(function () {
$('#tips').append('----' + $(this).find(':selected').text());
})
})
</script>
</body>
</html>
data.json 的內(nèi)容 : data.json
演示地址 -> http://47.107.64.136/Ajax
Correcting teacher：查無此人Correction time：2019-05-10 13:43:06
Teacher's summary：完成的不錯(cuò)。php接口，可以給jq，js，小程序，app使用。寫一個(gè)接口，全部都能通用。繼續(xù)加油