ajax做的二级级联

最新推荐文章于 2021-08-06 10:30:55 发布

原创最新推荐文章于 2021-08-06 10:30:55 发布 · 572 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 3 个专栏收录

14 篇文章

订阅专栏

JSP

8 篇文章

订阅专栏

Struts2

5 篇文章

订阅专栏

这篇博客详细介绍了如何使用Ajax技术结合jsp、action和serviceImpl层，在后台获取数据后动态拼接jsp页面上的option选项，实现二级级联的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsp

<!--当前培训机构下的所有班级名称  -->
班级名称：<s:select onchange="checkClassStaging();" id="classId"  theme="simple" list="classList" listKey="gid" listValue="name"  name="classEntity.gid" ></s:select>
<!--当前培训机构下的所有班级下的分期 -->
分期：<s:select  id="stagingId"  theme="simple" list="stagingList" listKey="gid" listValue="stagingCount" name="classEntity.classStagings.gid"></s:select>

action

/*查询所有的消息*/
	public String fetchAll(){
		if(entity != null && entity.getGid()!=null){
			entity = null;
		}
		//分页查询
		totalRecordCount = service.fetchTotalCount(entity);
		computeTotalPage();
		
		entityList = service.fetchList(entity, computeStartIndex(), PAGE_RESULTS_SIZE);
		classList = service.fetchClass(this.getCurrentUser());//当前登录用户下的所有培训机构
		stagingList = service.fetchStaging(classList);
		return RESULT_LIST;
	}

serviceImpl

/*查询当前培训用户下所有的班级 */
	@Override
	public List<ClassEntity> fetchClass(SecUserEntity user) {
		List<ClassEntity> classList = new ArrayList<ClassEntity>();
		SecUserEntity userEntity = fetchSingle(user);
		classList = userEntity.getClassEntityTrains();
		return classList;
	}
	
	/*查询第一条数据班级下面的所有分期*/
	public List<ClassStagingEntity> fetchStaging(List<ClassEntity> classList) {
		List<ClassStagingEntity> stagingList = new ArrayList<ClassStagingEntity>();
		ClassEntity classEntities = classList.get(0);
		ClassEntity classEntity = fetchSingle(classEntities);
		stagingList = classEntity.getClassStagings();
		return stagingList;
	}

action

/*级联下拉列表，通过从页面传过来的班级查找班级下面所有的分期*/
	public String cascadeClassStaging(){
		try{
			if(jsonParam!=null){
				ClassEntity classEntity = JSON.parseObject(jsonParam, ClassEntity.class);
				DwrResultVO result = service.fetchClassStaging(classEntity);
				jsonResult =JSONObject.toJSONString(result);
				System.out.println(jsonResult);
			}
		}catch(Exception e){
			e.printStackTrace();
		}
		return "flag";
	}

serviceImpl

public DwrResultVO fetchClassStaging(ClassEntity classEntity){
		DwrResultVO result = new DwrResultVO();
		List<ClassStagingEntity> classStagingEntities = new ArrayList<ClassStagingEntity>();
		ClassEntity entity = fetchSingle(classEntity);
		classStagingEntities = entity.getClassStagings();//获得班级下所有的分期
		if(classStagingEntities!=null){
			result.setOperationFlag(true);
			result.setClassStagingEntities(classStagingEntities);
		}else{
			result.setOperationFlag(false);
			result.setOperationMessage("当前班级还未分过期！！");
		}
		return result;
	}

jsp拼接（拼接option）

/*级联菜单 通过当前班级查询班级下所有的期数 */
	function checkClassStaging(){
		var classId = $("#classId").val();
		var entity = new Object();
		entity.gid = classId;
		if(classId!=""){
			$("#stagingId").empty();//拼接之前先删除原有的下拉列表里的值
			$.ajax({
				  async:false, 
		          url: "<%=APP_ACCESS_NAME%>/training/studentMessageAction!cascadeClassStaging.action",
		          type: "POST",
		          dataType: "json",
		          data: "jsonParam="+JSON.stringify(entity),
		          success: function( data ) {
		        	var result = JSON.parse(data);
		        	if(result.operationFlag==false){
		        		alert(result.operationMessage);
		        	}else if(result.operationFlag==true){
		        		var option='';
		        		for (var i = 0; i < result.classStagingEntities.length; i++) {//动态添加
		        			option +='<option value="'+result.classStagingEntities[i].gid+'">'+result.classStagingEntities[i].stagingCount+'</option>';
						}
		        		$("#stagingId").append($(option));    		
		        	}
		          }
			});
		}
		
	}