JQuery 中利用$.ajax()方法做的四级级联

最新推荐文章于 2021-09-08 17:00:59 发布
最新推荐文章于 2021-09-08 17:00:59 发布
阅读量1.1k 收藏
点赞数
分类专栏： java 文章标签： jquery js json ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinrizk/article/details/34096915
版权
js代码如下所示： 
function getIndustry2List(obj){
	var superCode = obj.value;
	$.ajax({
		url:'${base}/editEntInformation/getIndustryList2.action?fresh='+Math.random(),
		data:{superCode:superCode},
		dataType:'json',
		type:'post',
		cache:'false',
		success:function(data){
			var arr = eval(data);
			var industry2 = document.getElementById("ent.industry2").value;
			$("#industry2").empty();
			$("<option value=''>请选择</option>").appendTo($("select[name='ent.industry2']"));
			$("#industry3").empty();
			$("<option value=''>请选择</option>").appendTo($("select[name='ent.industry3']"));
			$("#industry4").empty();
			$("<option value=''>请选择</option>").appendTo($("select[name='ent.industry4']"));
			for(var i = 0; i < arr.length; i++){
				if(arr[i].industryCode == industry2){
					$("<option value='"+arr[i].industryCode+"' selected>"+arr[i].industryName+"</option>").appendTo($("select[name='ent.industry2']"));
				}else{
					$("<option value='"+arr[i].industryCode+"'>"+arr[i].industryName+"</option>").appendTo($("select[name='ent.industry2']"));;
				}
			}
		}
	});
}
//获取行业中类
function getIndustry3List(obj){
	var superCode = obj.value;
	$.ajax({
		url:'${base}/editEntInformation/getIndustryList3.action?fresh='+Math.random(),
		data:{superCode:superCode},
		dataType:'json',
		type:'post',
		cache:'false',
		success:function(data){
			var arr = eval(data);
			var industry3 = document.getElementById("ent.industry3").value;
			$("#industry3").empty();
			$("<option value=''>请选择</option>").appendTo($("select[name='ent.industry3']"));
			$("#industry4").empty();
			$("<option value=''>请选择</option>").appendTo($("select[name='ent.industry4']"));
			for(var i = 0; i < arr.length; i++){
				if(arr[i].industryCode == industry3){
					$("<option value='"+arr[i].industryCode+"' selected>"+arr[i].industryName+"</option>").appendTo($("select[name='ent.industry3']"));
				}else{
					$("<option value='"+arr[i].industryCode+"'>"+arr[i].industryName+"</option>").appendTo($("select[name='ent.industry3']"));;
				}
			}
		}
	});
}

//获取行业小类
function getIndustry4List(obj){
	var superCode = obj.value;
	$.ajax({
		url:'${base}/editEntInformation/getIndustryList4.action?fresh='+Math.random(),
		data:{superCode:superCode},
		dataType:'json',
		type:'post',
		cache:'false',
		success:function(data){
			var arr = eval(data);
			var industry4 = document.getElementById("ent.industry4").value;
			$("#industry4").empty();
			$("<option value=''>请选择</option>").appendTo($("select[name='ent.industry4']"));
			for(var i = 0; i < arr.length; i++){
				if(arr[i].industryCode == industry4){
					$("<option value='"+arr[i].industryCode+"' selected>"+arr[i].industryName+"</option>").appendTo($("select[name='ent.industry4']"));
				}else{
					$("<option value='"+arr[i].industryCode+"'>"+arr[i].industryName+"</option>").appendTo($("select[name='ent.industry4']"));;
				}
			}
		}
	});
}

页面代码如下：

<th>所属行业：</th>
            <td> 
      		
            <select id="industry1" name="ent.industry1" οnchange="getIndustry2List(this);" class="edit_select" >
          		<option value="">请选择</option>
 				<#list dicIndustry1List?if_exists as son1>                       
          		<option value="${son1.industryCode?if_exists}" <#if '${ent.industry1?if_exists}'=='${son1.industryCode?if_exists}'>selected</#if>>${son1.industryName?if_exists}</option>
 				</#list>
          	</select>
          	<input type="hidden" id="ent.industry2" value="${ent.industry2?if_exists}">
            <select id="industry2" name="ent.industry2" οnchange="getIndustry3List(this);" class="edit_select">
          		<option value="">请选择</option>
          		<#list dicIndustry2List?if_exists as son1>                       
          		<option value="${son1.industryCode?if_exists}" <#if '${ent.industry2?if_exists}'=='${son1.industryCode?if_exists}'>selected</#if>>${son1.industryName?if_exists}</option>
 				</#list>
          	</select>
          	<input type="hidden" id="ent.industry3" value="${ent.industry3?if_exists}">
        	<select id="industry3" name="ent.industry3" οnchange="getIndustry4List(this);" class="edit_select">
        		<option>请选择</option>
        		<#list dicIndustry3List?if_exists as son1>                       
          		<option value="${son1.industryCode?if_exists}" <#if '${ent.industry3?if_exists}'=='${son1.industryCode?if_exists}'>selected</#if>>${son1.industryName?if_exists}</option>
 				</#list>
        	</select>
        	<input type="hidden" id="ent.industry4" value="${ent.industry4?if_exists}">
          	<select id="industry4" name="ent.industry4" class="edit_select">
          		<option>请选择</option>
          		<#list dicIndustry4List?if_exists as son1>                       
          		<option value="${son1.industryCode?if_exists}" <#if '${ent.industry4?if_exists}'=='${son1.industryCode?if_exists}'>selected</#if>>${son1.industryName?if_exists}</option>
 				</#list>
          	</select>	
            </td>
            </tr>
   在struts中配置如下： 

 <!--获取行业大类 [Young]-->
  <action name="getIndustryList2" class="cn.fulong.omp.web.action.EditEntInformationAction" method="getIndustryList2">
  </action>
  <!--获取行业中类 [Young]-->
  <action name="getIndustryList3" class="cn.fulong.omp.web.action.EditEntInformationAction" method="getIndustryList3">
  </action>
  <!--获取行业小类 [Young]-->
  <action name="getIndustryList4" class="cn.fulong.omp.web.action.EditEntInformationAction" method="getIndustryList4">
  </action>

  后台中Action的代码如下： 
<div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">/**</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">*此处的set/get方法是为了获得各级联数据，用于回显编辑页的内容</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">*</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">**/</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">public List<DicIndustry> getDicIndustry1List() {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">  this.dicIndustry1List = ((BaseTransaction) Platform.getInstance().getBean(</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">    "baseTransaction")).find("from DicIndustry where lev = '1'");</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">  return dicIndustry1List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "><br style="background-color: inherit;" /></div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public void setDicIndustry1List(List<DicIndustry> dicIndustry1List) {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">  this.dicIndustry1List = dicIndustry1List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> </div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public List<DicIndustry> getDicIndustry2List() {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">  this.dicIndustry2List = ((BaseTransaction) Platform.getInstance().getBean(</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">    "baseTransaction")).find("from DicIndustry where lev = '2'");</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">  return dicIndustry2List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "><br style="background-color: inherit;" /></div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public void setDicIndustry2List(List<DicIndustry> dicIndustry2List) {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">  this.dicIndustry2List = dicIndustry2List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "><br style="background-color: inherit;" /></div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public List<DicIndustry> getDicIndustry3List() {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">  this.dicIndustry3List = ((BaseTransaction) Platform.getInstance().getBean(</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">    "baseTransaction")).find("from DicIndustry where lev = '3'");</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">  return dicIndustry3List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "><br style="background-color: inherit;" /></div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public void setDicIndustry3List(List<DicIndustry> dicIndustry3List) {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">  this.dicIndustry3List = dicIndustry3List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "><br style="background-color: inherit;" /></div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public List<DicIndustry> getDicIndustry4List() {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">  this.dicIndustry4List = ((BaseTransaction) Platform.getInstance().getBean(</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">    "baseTransaction")).find("from DicIndustry where lev = '4'");</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">  return dicIndustry4List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "><br style="background-color: inherit;" /></div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public void setDicIndustry4List(List<DicIndustry> dicIndustry4List) {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">  this.dicIndustry4List = dicIndustry4List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div>

//获取行业大类 Young
 public String getIndustryList2() throws IOException{
  List<DicIndustry> industry2 = userManagerService.getIndustry2(superCode);
  JSONObject jsonObject = new JSONObject();
  jsonObject.put("json", industry2);
  String jsonString = jsonObject.getString("json");
  HttpServletResponse response = (HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);
  response.setHeader("content-type", "text/html;charset=utf-8");
  response.getWriter().write(jsonString);
  return null;
 }
//获取行业中类 Young
 public String getIndustryList3() throws IOException{
  List<DicIndustry> industry3 = userManagerService.getIndustry3(superCode);
  JSONObject jsonObject = new JSONObject();
  jsonObject.put("json", industry3);
  String jsonString = jsonObject.getString("json");
  HttpServletResponse response = (HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);
  response.setHeader("content-type", "text/html;charset=utf-8");
  response.getWriter().write(jsonString);
  return null;
 }
//获取行业小类
 public String getIndustryList4() throws IOException{
  List<DicIndustry> industry4 = userManagerService.getIndustry4(superCode);
  JSONObject jsonObject = new JSONObject();
  jsonObject.put("json", industry4);
  String jsonString = jsonObject.getString("json");
  HttpServletResponse response = (HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);
  response.setHeader("content-type", "text/html;charset=utf-8");
  response.getWriter().write(jsonString);
  return null;
 }

在userManagerServiceImpl中被调用的放法如下： 
public List<DicIndustry> getIndustry2(String superCode) {
  // TODO Auto-generated method stub
  List<DicIndustry> industry2 = baseTransaction.find(
    "from DicIndustry where lev = 2 and uperIndustry = ?",
    superCode);
  return industry2;
 }

 public List<DicIndustry> getIndustry3(String superCode) {
  // TODO Auto-generated method stub
  List<DicIndustry> industry3 = baseTransaction.find(
    "from DicIndustry where lev = 3 and uperIndustry = ?",
    superCode);
  return industry3;
 }

 public List<DicIndustry> getIndustry4(String superCode) {
  // TODO Auto-generated method stub
  List<DicIndustry> industry4 = baseTransaction.find(
    "from DicIndustry where lev = 4 and uperIndustry = ?",
    superCode);
  return industry4;
 }

用上面这种方法不仅可以做到四级级联，还可以扩展到无限级的级联


jinrizk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax + xml 省市县区四级联动
03-19
ajax + xml 省市县区四级联动
Ajax二--四级联动
07-08
个人研究出来的ajax二-四级联动下拉列表，不明白的给我发信息或者到我blog上留言。http://blog.psnworld.cn
jQuery+ajax+servlet实现4级联动
Donny的专栏
03-05 2212
Servlet： package com.servlet.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.htt
四级联动代码ajax版
11-24
四级联动，加数据库，网上收集的四级联动，加数据库，网上收集的四级联动，加数据库，网上收集的
jQuery+ajax实现无刷新级联菜单示例
10-24
本示例中的AJAX部分通过jQuery的`$.ajax`方法实现，利用POST方法向服务器端发送请求，并处理响应。 #### 知识点四：前后端交互 在无刷新级联菜单中，前端JavaScript与后端服务进行数据交互是核心环节。本示例通过...
JQuery通用四级级联
12-13
在jQuery中，`$.ajax()`或`$.get()`方法可以实现与服务器的通信，获取JSON格式的数据。 4. **JSON格式**：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和...
4级级联菜单JQUERY+JSON版
06-12
"4级级联菜单JQUERY+JSON版"是一个利用JavaScript库jQuery和数据格式JSON实现的多级联动菜单的示例。这个项目主要展示了如何在现代浏览器（如Chrome、Firefox、Opera以及IE11）中创建一个可扩展且功能丰富的四级菜单...
jQuery ajax实现省市县三级联动
12-02
下面我们用Jquery，ajax,做一个省，市，县的三级联动： 下面是我做三级联动下拉的步骤以及逻辑 第一步：先做一个省市区表格 第二步：建个PHP页面显示用我是在<body>里放用来接收要显示的省市区表格信息，里面...
jquery+ajax+jsp+servlet实现二级级联菜单
01-15
### 使用jQuery、Ajax、JSP与Servlet实现二级级联菜单 #### 一、项目背景与技术栈概述 本文档将详细介绍如何使用jQuery、Ajax、JSP与Servlet来实现一个简单的二级级联菜单功能。该功能常见于许多Web应用程序中，如...
关于jquery（ajax）web四级联动
05-29
使用jquery中的ajax在web项目中实现四级联动，选择地区。使用jquery中的ajax在web项目中实现四级联动，选择地区。使用jquery中的ajax在web项目中实现四级联动，选择地区。
Ajax四级联动源代码
12-09
城市四级联动源代码~很强大的四级联动！大家一起来看看吧
JS实现动态四级联动
12-24
使用Js实现动态四级联动，包括js于方法
jquery写的城市四级联动菜单
04-10
jquery写的城市四级联动菜单，当然数据可能不是很完善，如果您拥有更全的城市信息，可以修改js里面的内容，使其完美
jQuery四级联动商品分类代码.zip
07-05
jQuery四级联动商品分类代码是一款类似淘宝发布宝贝商品分类四级联动菜单选择代码，适用于商品分类检索条件代码。
jQuery ajax省市区四级联动
weixin_33843947的博客
09-22 136
$(function(){ query(); //获取到市 $('#province').change(function(){ var id = $('#province').val(); $.ajax({ url:'/user/selectp?rootid='+id, typ...
Ajax+jQuery selectpicker四级联动
weixin_46170925的博客
09-08 348
Ajax+jQuery selectpicker四级联动 问题描述 引用selectpicker做四级联动时 第一级变化，后三级需要初始化，但是一直只能初始化相邻的下拉框，经过多番查找与调试，问题定位在 function initLotId() { $("#lotId").html("<option value='' disabled selected style='display:none;'>lot ID</option>"); //相当于placeholder
jquery 实现四级联动
热门推荐
Cherry
07-21 1万+
                                                先上效果图，最近项目中出现四级联动，因为花费很长时间去弄这个东西，所以整理一下，方便以后的使用。       对于四级联动，因为开始并没有去弄明白他是怎么回事，开始是在js中定义一个四维数组，然后不停的去遍历这个四维数组，导致变量越来越多，根本没法控制，同时代码的可读性很差。所以现在采用前台根据...
城市四级联动，js和jquery对ajax的支持结合html,json
weixin_30655219的博客
04-11 148
jdbc工具类 public class JdbcUtils { public static BasicDataSource bs=null; ...
Jquery+ajax实现三级级联下拉菜单
最新发布
05-23
三级级联下拉菜单可以通过Jquery+Ajax实现，以下是一个简单的示例代码： HTML代码： ```html 请选择省份 北京">北京 上海">上海 广东">广东 请选择城市 请选择区县 ``` Jquery+Ajax代码： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值