版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/iiiiiilikangshuai/article/details/81749492
前几天再做一个项目，需要用到四级省市联动，平时很少用到这样的多级省市联动的问题，
如今写好了，便于大家分享一波
先上代码完成实现页面图
一个不算简单的列子，需要先查询院系，根据院系查找该院系下的课程，根据课程查找本门课程的章节数，根据章节数以及难易程度的选项，去查找该难易程度的题目数量。
首先先来页面代码《不是完整代码，只是一个模块，不过可以说明问题》
<div style="width:900px;margin:auto;margin-top: 100px">
<form method="post" id="OnlinePagerDesignForm" name="OnlinePagerDesignForm"
action="OnlinePagerDesign?str=online&role=${user.role}&name=${user.userName}" enctype="multipart/form-data">
<table class="table table-bordered">
<tr height="35px">
<td align="right" nowrap="nowrap" bgcolor="#f1f1f1">院系：</td>
<td align="center" width="130px"><font style="font-size: 13px"><select id="facultyId" name="tplanDepartment"
class="js-example-data-array"
style="font-family:microsoft yahei;height: auto;"onchange="getCourses()">
</select></font></td>
<td align="left" nowrap="nowrap" bgcolor="#f1f1f1">课程：</td>
<td align="center"><font style="font-size: 13px">
<select id="courseId" name="courseId" class="js-example-data-arrayco"
style="font-family:microsoft yahei;height: auto;" >
<!-- <option value="0">--请选择专业--</option> -->
</select> </font></td>
<td align="right" nowrap="nowrap" bgcolor="#f1f1f1">试卷名称：</td>
<td align="center"><font style="font-size: 13px">
<input type="text" name="tplanName" class="form-control"style="height:auto;width:150px;">
</font>
</td>
</tr>
<tr height="35px">
<td width="130px" align="right" nowrap="nowrap" bgcolor="#f1f1f1">名词解释题：</td>
<td width="10%" align="right" nowrap="nowrap" bgcolor="#f1f1f1">章节：</td>
<td width="20%">
<select id="schoiceChapter"
name="schoiceChapterwa" class="form-control" style="width:100px;"></select></td>
<td width="15%" align="right" nowrap="nowrap" bgcolor="#f1f1f1">难易度：</td>
<td><select id="schoiceLevel" name="schoiceLevelwa"
class="form-control" style="height:auto;width:100px;">
<!-- <option value="0" selected="selected">~~请选择~~</option> -->
<option value="0">简单</option>
<option value="1">一般</option>
<option value="2">困难</option>
</select></td>
<td width="130px" align="right" nowrap="nowrap" bgcolor="#f1f1f1">数量：</td>
<td width="20%"><select id="usedCount"
name="usedCountwa" class="form-control"style="width:100px;"></select></td>
</tr>再来js代码
1.更新院系信息的代码
function getFaculty() {
//更新院系信息
$.ajax({
type : "GET",
contentType : "application/json",
url : "allFacultys",
dataType : "json",
data : "{}",
success : function(facultyDatas) {
$(".js-example-data-array").select2({
data : facultyDatas,
});
$("#facultyId").empty();
$("#facultyId").append("<option value='0'>" + "--请选择院系--" + "</option>");
for (var i = 0; i < facultyDatas.length; i++) {
$("#facultyId").append(
"<option value='" + facultyDatas[i].id + "'>"
+ facultyDatas[i].text + "</option>");
}
}
});
}2.更新专业的代码《一部分》
function getCourses() {
var facultyIdParam = $("#facultyId").val();
$.ajax({
type : "GET",
contentType : "application/json",
url : "courseByfacultyId",
dataType : "json",
data : {
facultyId : facultyIdParam
},
success : function(courseDatas) {
$(".js-example-data-arrayco").select2({
data : courseDatas,
});
$("#courseId").empty();
$("#courseId").append(
"<option value='0'>" + "--请选择课程--" + "</option>");
for (var i = 0; i < courseDatas.length; i++) {
$("#courseId").append(
"<option value='"+courseDatas[i].id+"'>"
+ courseDatas[i].text
+ "</option>");
}
/*for (var i = 0; i < courseDatas.length; i++) {
index[i] = courseDatas[i].id;
content[i] = courseDatas[i].courseChapter;
}
InitProperty(Datas);*/
$("#courseId").change(function() {
var courseIdParam = $("#courseId").val();
for(var i = 0; i < courseDatas.length; i++){
if(courseIdParam == courseDatas[i].id){
$("#schoiceChapter").empty();
$("#schoiceChapter").append(
"<option value='0'>" + "--请选择章节--" + "</option>");
for(var j = 1;j <=courseDatas[i].courseChapter;j++){
$("#schoiceChapter").append(
"<option value='"+j+"'>第"
+ j
+ "章</option>");
}
}
}
});
}
});3.更新题目数量的js代码《一部分》
//名词解释题
$("#schoiceChapter").change(function() {
//alert("获得数量222");
var schoiceChapterParam = $("#schoiceChapter").val();
var schoiceLevelParam = $("#schoiceLevel").val();
//alert(schoiceChapterParam);
$.ajax({
type : "GET",
contentType : "application/json",
url : "wanumByChapter",
dataType : "json",
data : {
schoiceChapter : schoiceChapterParam,
schoiceLevel : schoiceLevelParam
},
success : function(numDatas) {
$(".js-example-data-arrayco").select2({
data : numDatas,
});
$("#usedCount").empty();
$("#usedCount").append(
"<option value='0'>" + "--请选择题目数--" + "</option>");
for (var i = 0; i < numDatas.length; i++) {
for(var j = 1;j <=numDatas[i].num;j++ ){
$("#usedCount").append(
"<option value='"+j+"'>"
+ j
+ "</option>");
}
}
}
});
});
$("#schoiceLevelw").change(function() {
var schoiceChapterParam = $("#schoiceChapter").val();
var schoiceLevelParam = $("#schoiceLevel").val();
alert(schoiceChapterParam);
$.ajax({
type : "GET",
contentType : "application/json",
url : "wanumByChapter",
dataType : "json",
data : {
schoiceChapter : schoiceChapterParam,
schoiceLevel : schoiceLevelParam
},
success : function(numDatas) {
$(".js-example-data-arrayco").select2({
data : numDatas,
});
$("#usedCount").empty();
$("#usedCount").append(
"<option value='0'>" + "--请选择题目数--" + "</option>");
for (var i = 0; i < numDatas.length; i++) {
for(var j = 1;j <=numDatas[i].num;j++ ){
$("#usedCount").append(
"<option value='"+j+"'>"
+ j
+ "</option>");
}
}
}
});
});使用ajax方法异步操作，可以更加方便，自习观察代码，会有彩蛋，
如果需要源码，请关注我，私信，++++++喽