abstrak：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>三級聯(lián)動</title></head><body>系名 <select
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三級聯(lián)動</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 () {
//獲取一級列表的內(nèi)容
$.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內(nèi)
$('#dep').html(option);
});
//當選擇一級列表的某個選項，獲取該選項的二級列表的內(nèi)容
$('#dep').change(function(){
//選擇完成，添加到提示內(nèi)
$('#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);
});
});
//當選擇二級列表的某個選項，獲取該選項的三級列表的內(nèi)容
$('#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 的內(nèi)容 : data.json
演示地址 -> http://47.107.64.136/Ajax
Guru membetulkan：查無此人Masa pembetulan：2019-05-10 13:43:06
Rumusan guru：完成的不錯。php接口，可以給jq，js，小程序，app使用。寫一個接口，全部都能通用。繼續(xù)加油