多级省市联动的代码实现 ajax实现

阳光穿透心脏的1/2处 2022-05-16 06:25 224阅读 0赞

前几天再做一个项目，需要用到四级省市联动，平时很少用到这样的多级省市联动的问题，

如今写好了，便于大家分享一波

先上代码完成实现页面图

![70][] 五级省市联动的例子

一个不算简单的列子，需要先查询院系，根据院系查找该院系下的课程，根据课程查找本门课程的章节数，根据章节数以及难易程度的选项，去查找该难易程度的题目数量。

首先先来页面代码《不是完整代码，只是一个模块，不过可以说明问题》

<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;" >
    							
    						</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">简单</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.更新院系信息的代码

2.更新专业的代码《一部分》

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方法异步操作，可以更加方便，自习观察代码，会有彩蛋，

如果需要源码，请关注我，私信，++++++喽

[70]: /images/20220516/bf0da5c194044d8b8385a37802405b9d.png