abstract：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>三级联动</title></head><body>系名 <select
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
系名 <select name="" id="dep">
<option value="">-- 请选择系名 --</option>
</select>
年级 <select name="" id="grade">
<option value="">-- 请选择年级 --</option>
</select>
班级 <select name="" id="class">
<option value="">-- 请选择班级 --</option>
</select>
<p id="tips" style="color: #99a5ff"></p>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(function () {
//获取一级列表的内容
$.getJSON('data.json',function (data) {
let option = '<option value="">-- 请选择系名 --</option>';
$.each(data,function(i){
//选择出一级列表
if (data[i].pId === 0){
option += '<option value="'+data[i].id+'">'+data[i].depName+'</option>';
}
});
//添加到select内
$('#dep').html(option);
});
//当选择一级列表的某个选项，获取该选项的二级列表的内容
$('#dep').change(function(){
//选择完成，添加到提示内
$('#tips').html('已选择：' + $(this).find(':selected').text());
$.getJSON('data.json',function(data){
let option = '<option value="">-- 请选择年级 --</option>';
$.each(data,function(i){
// 获取二级列表
if (data[i].pDepId === parseInt($('#dep').val())) {
option += '<option value="'+data[i].gradeId+'">'+data[i].gradeName+'</option>';
}
});
$('#grade').html(option);
});
});
//当选择二级列表的某个选项，获取该选项的三级列表的内容
$('#grade').change(function(){
$('#tips').append('----' + $(this).find(':selected').text());
$.getJSON('data.json',function(data){
let option = '<option value="">-- 请选择班级 --</option>';
$.each(data,function(i){
// 获取三级列表
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 的内容 : data.json
演示地址 -> http://47.107.64.136/Ajax
Correcting teacher：查无此人Correction time：2019-05-10 13:43:06
Teacher's summary：完成的不错。php接口，可以给jq，js，小程序，app使用。写一个接口，全部都能通用。继续加油