layui与多级联动返填

<script>

layui.use(['form', 'layer'], function () {
$ = layui.jquery;
var form = layui.form()
, layer = layui.layer;

$(function () {
//学院
$.ajax({
url: "/Users/GetColleges",
type: "post",
async: false,
dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].CollegeId + '">' + data[i].CollegeName + '</option>'
$("[name=CollegeId]").append(op);
}

//返填
$.ajax({
url: "/Student/QuertById?Id="[email protected]["Id"],
type: "post",
async: false,
dataType: "json",
success: function (data) {
$("[name=StudentId]").val(@Request.QueryString["Id"]);
$("[name=StudentName]").val(data.StudentName);
$("[name=StudentIdCard]").val(data.StudentIdCard);
$("[name=CollegeId]").val(data.CollegeId);
$("[name=StudentNum]").val(data.StudentNum);
form.render('select');
var mid = data.MajorId;
var sid = data.StageId;
var cid = data.ClassId;

$.ajax({
url: "/Users/GetMajorsByCollegeId?CollegeId=" + data.CollegeId,
type: "post",
async: false,
dataType: "json",
success: function (data) {
$("[name=MajorId]").empty();
$("[name=MajorId]").append('<option value="0">--专业--</option>');
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].MajorId + '">' + data[i].MajorName + '</option>'
$("[name=MajorId]").append(op);
form.render('select');
}
$("[name=MajorId]").val(mid);
form.render('select');
$.ajax({
url: "/Users/GetStages?MajorId=" + mid,
type: "post",
async: false,
dataType: "json",
success: function (data) {
console.log(data);
$("[name=StageId]").empty();
$("[name=StageId]").append('<option value="0">--阶段--</option>');
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].StageId + '">' + data[i].StageName + '</option>'
$("[name=StageId]").append(op);
form.render('select');
}
$("[name=StageId]").val(sid);
form.render('select');
$.ajax({
url: "/Student/QueryBySid",
data: {
Id: sid,
},
type: "post",
async: false,
dataType: "json",
success: function (data) {
$("[name=ClassId]").empty();
$("[name=ClassId]").append('<option value="0">--班级--</option>');
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].ClassId + '">' + data[i].ClassName + '</option>'
$("[name=ClassId]").append(op);
form.render('select');
}
$("[name=ClassId]").val(cid);
form.render('select');
},
error: function (e) {
console.log(e);
}
})
}
})
}
})
}
})
}
})
})

//专业
form.on('select(collegeId)', function (data) {
$.ajax({
url: "/Users/GetMajorsByCollegeId?CollegeId=" + $("[name=CollegeId]").val(),
type: "post",
async: false,
dataType: "json",
success: function (data) {
$("[name=MajorId]").empty();
$("[name=MajorId]").append('<option value="0">--专业--</option>');
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].MajorId + '">' + data[i].MajorName + '</option>'
$("[name=MajorId]").append(op);
form.render('select');
}
}
})
})
//阶段
form.on('select(MajorId)', function (data) {
$.ajax({
url: "/Users/GetStages?MajorId=" + $("[name=MajorId]").val(),
type: "post",
async: false,
dataType: "json",
success: function (data) {
console.log(data);
$("[name=StageId]").empty();
$("[name=StageId]").append('<option value="0">--阶段--</option>');
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].StageId + '">' + data[i].StageName + '</option>'
$("[name=StageId]").append(op);
form.render('select');
}
}
})
})

//班级
form.on('select(stageId)', function (data) {
$.ajax({
url: "/Student/QueryBySid",
data: {
Id: $("[name=StageId]").val(),
},
type: "post",
async: false,
dataType: "json",
success: function (data) {
$("[name=ClassId]").empty();
$("[name=ClassId]").append('<option value="0">--班级--</option>');
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].ClassId + '">' + data[i].ClassName + '</option>'
$("[name=ClassId]").append(op);
form.render('select');
}
},
error: function (e) {
console.log(e);
}
})
})

</script>

总结: 核心 ajax 毁掉函数中调下一级ajax