前幾天再做一個專案，需要用到四級省市聯動，平時很少用到這樣的多級省市聯動的問題，

如今寫好了，便於大家分享一波

先上程式碼完成實現頁面圖

一個不算簡單的列子，需要先查詢院系，根據院系查詢該院系下的課程，根據課程查詢本門課程的章節數，根據章節數以及難易程度的選項，去查詢該難易程度的題目數量。

首先先來頁面程式碼《不是完整程式碼，只是一個模組，不過可以說明問題》

<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方法非同步操作，可以更加方便，自習觀察程式碼，會有彩蛋，

如果需要原始碼，請關注我，私信，++++++嘍