jquery实现三级联动 +struts2 +ajax

最新推荐文章于 2024-08-12 09:24:46 发布
最新推荐文章于 2024-08-12 09:24:46 发布
阅读量71 收藏
点赞数
文章标签： javascript java python ViewUI
原文链接：https://my.oschina.net/u/2389884/blog/776202
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

跳转页面代码：

public String indictDetail(){
            。。。。。。。。。。。。。。。。
			// 业务处理
			initProblemType();
			initproblemRespon();
		        return "indictDet。。。。。。。。。。。。。。
	}

后台代码：

public String listTypeone() {
		try {
			if (indictBusiness == null) {
				indictBusiness = new IndictBusiness();
			}
			List<IndictBusiness> list = indictInfoManager.listTypeone(indictBusiness);
			setResult("typeone", list);
		} catch (BusinessException e) {
			logger.error("一级菜单异常!", e);
			setResultMessage("一级菜单异常");
			return ERROR;
		} 
		return SUCCESS;
	}
	public String listTypetwo() {
		JsonOut out=getJsonOut();
		PrintWriter writer ;
		try {
			writer = getHttpServletResponse().getWriter();
			if (indictBusiness == null) {
				indictBusiness = new IndictBusiness();
			}
			List<IndictBusiness> list = indictInfoManager.listTypetwo(indictBusiness);
//			setResult("typetwo", list);
			out.put("typetwoList", list); 
			writer.print(out);
		} catch (BusinessException e) {
			logger.error("二级菜单异常!", e);
			setResultMessage("二级菜单异常");
			return ERROR;
		} catch (IOException e) { 
			logger.error("二级菜单的IO异常!", e);
			setResultMessage("二级菜单的IO异常");
			return ERROR;
		} 
		return null;
	}

html代码：


<!-- 业务信息处理 problemTypeList -->
		<div id="business" style="background-color: #EFEEF5;">	
			<p style="border-bottom:1px solid #DDDDDD"><span style="font-size: 150%;margin: 30px">业务信息</span></p>
		<div class="inline-block pr15" style="width: 5%; clear: both;"></div>
			<div class="inline-block pr5 " style="width: 30%; margin-top: 10px;">
					投诉业务分类
					<select id="problemAttr" name="indictBusiness.problemAttr" onchange="btnSelect1()">  	 				    
					    <option value="">---没有选择---</option>
							#set($problemTypeList=$result.get("problemTypeList"))
							#if($problemTypeList && $problemTypeList.size()>0 )
							#foreach($que in $problemTypeList)
							<option value="$!que.encodeValue"
								#if($!indictInfo.problemAttr==$!que.encodeValue) selected #end>$!que.encodeDesc</option>
							#end #end
					</select>
			</div>
			
			<div class="inline-block pr5 " style="width: 30%; margin-top: 10px;">
					问题定位
					<select id="questionlocate" name="indictBusiness.questionlocate"  onclick="btnSelect2()">				    
					    <option value="">---没有选择---</option>
					</select>
			</div>
			
			<div class="inline-block pr5 " style="width: 30%; margin-top: 10px;">
					问题定责
					<select id="problemRespon" name="indictBusiness.problemRespon" >  	 				    
					    <option value="">---没有选择---</option>
					    #set($problemResponList=$result.get("problemResponList"))
							#if($problemResponList && $problemResponList.size()>0 )
							#foreach($problemRespon in $problemResponList)
							<option value="$!problemRespon.encodeValue"
								#if($!indictBusiness.problemRespon==$!problemRespon.encodeValue) selected #end>$!problemRespon.encodeDesc</option>
							#end #end
					</select>
			</div>
			
			<p style="border-bottom:1px solid #DDDDDD"><span style="font-size: 150%;margin: 30px">问题分类</span></p>
		<div class="inline-block pr15" style="width: 5%; clear: both;"></div>
			<div class="inline-block pr5 " style="width: 30%; margin-top: 10px;">
					一级分类
					<select id="typeone" name="indictBusiness.typeone" onclick="btnType1()" onchange="changeType1()">				    
					    <option value="">---没有选择---</option>
					</select>
			</div>
			<div class="inline-block pr5 " style="width: 30%; margin-top: 10px;">
					二级分类
					<select id="typetwo" name="indictBusiness.typetwo" onclick="btnType2()" onchange="changeType2()">				    
					    <option value="">---没有选择---</option>
					</select>
			</div>
			<div class="inline-block pr5 " style="width: 30%; margin-top: 10px;">
					三级分类
					<select id="typethree" name="indictBusiness.typethree" onclick="btnType3()">				    
					    <option value="">---没有选择---</option>
					</select>
			</div>
		</div>

js代码：

//	投诉业务分类的onchange事件
	function btnSelect1(){
			var tempvalue = $("#problemAttr").val();
			var tempvalue2 = $("#problemAttr").val();
// 			alert(tempvalue);
			var type='';//定位
			var type2=''//分类1
			//对问题定位的改变
			if(tempvalue !=null && tempvalue != ""){
				$("#questionlocate option[value!='']").remove();
				$("#typeone option[value!='']").remove();
// 				$("#questionlocate")加载问题定位
				if(tempvalue=='01'){
					type='indict.question01';
				}else if(tempvalue=='02'){
					type='indict.question02';
				}else if(tempvalue=='03'){
					type='indict.question02';
				}else if(tempvalue=='04'){
					type='indict.question02';
				}else if(tempvalue=='05'){
					type='indict.question05';
				}else if(tempvalue=='06'){
					type='indict.question06';
				}else if(tempvalue=='07'){
					type='indict.question07';
				}else if(tempvalue=='08'){
					type='indict.question02';
				}
			//对一级分类的改变
				if(tempvalue=='01'){
					type2='indict.typeone01';
				}else if(tempvalue=='02'){
					type2='indict.typeone02';
				}else if(tempvalue=='03'){
					type2='indict.typeone02';
				}else if(tempvalue=='04'){
					type2='indict.typeone02';
				}else if(tempvalue=='05'){
					type2='indict.typeone03';
				}else if(tempvalue=='06'){
					type2='indict.typeone04';
				}else if(tempvalue=='07'){
					type2='indict.typeone05';
				}else if(tempvalue=='08'){
					type2='indict.typeone02';
				}
				
				//encodeDict.encodeType=type
				var jsonObj = {
					encodeType : type,
					encodeType2 : type2
				};
// 				alert(jsonObj.encodeType);
				jQuery.ajax({
					type:"POST",
					url:"indict!excuteAjax.do",
					dataType:'json',
					contentType: "application/x-www-form-urlencoded;charset=UTF-8",
					async:false,
					data: jsonObj,
					success: function(result) {
//						alert(result.data);
//						alert(result.msg);
						var list = result.data;
						var typeoneList = result.typeoneList;
						for (var i = 0; i < list.length; i++) {
// 							alert(list[i].encodeDesc);
// 							alert(list[i].encodeValue);
 							$("#questionlocate").append("<option value='"+list[i].encodeValue+"'>"+list[i].encodeDesc+"</option>");
						}
						for (var i = 0; i < typeoneList.length; i++) {
							$("#typeone").append("<option value='"+typeoneList[i].encodeValue+"'>"+typeoneList[i].encodeDesc+"</option>");
						}
					}
				}); 	
			}else{
				$("#questionlocate option[value!='']").remove();
				$("#typeone option[value!='']").remove();
				$("#typetwo option[value!='']").remove();
				$("#typethree option[value!='']").remove();
			}
			
		}
//		问题定位的onclick事件
	function btnSelect2(){
		var tempvalue = $("#problemAttr").val();
		if(tempvalue !=null && tempvalue != ""){
			
		}else{
			alert("请选择投诉业务分类！");
		}
	}	
	//一级分类
	function btnType1(){
		var tempvalue = $("#problemAttr").val();
		if(tempvalue !=null && tempvalue != ""){
			
		}else{
			alert("请选择投诉业务分类！");
		}
		
		
	}	
//	一级分类修改事件
	function changeType1(){
		var typeonevalue = $("#typeone").val().trim();
		if(typeonevalue != null && typeonevalue != ""){
		$("#typetwo option[value!='']").remove();
			var jsonObj = {
					"indictBusiness.twopartid" : typeonevalue
				};
			
			jQuery.ajax({
				type:"POST",
				url:"indict!listTypetwo.do",
				dataType:'json',
				contentType: "application/x-www-form-urlencoded;charset=UTF-8",
				async:false,
				data: jsonObj,
				success: function(result) {
					var typetwoList = result.typetwoList;
					for (var i = 0; i < typetwoList.length; i++) {
						$("#typetwo").append("<option value='"+typetwoList[i].twotypeid+"'>"+typetwoList[i].twotypevalue+"</option>");
					}
				}
			}); 
		}else{
			$("#typetwo option[value!='']").remove();
			$("#typethree option[value!='']").remove();
		}
	}
	//二级分类onclick事件
	function btnType2(){
		var typeonevalue = $("#typeone").val().trim();
		if(typeonevalue !=null && typeonevalue != ""){
			
		}else{
			alert("请选择一级分类！");
		}
	}
	
	//二级分类onchange事件
	function changeType2(){
		var typetwovalue = $("#typetwo").val().trim();
		if(typetwovalue !=null && typetwovalue != ""){
			$("#typethree option[value!='']").remove();
			var jsonObj = {
					"indictBusiness.threepartid" : typetwovalue
				};
			
			jQuery.ajax({
				type:"POST",
				url:"indict!listTypethree.do",
				dataType:'json',
				contentType: "application/x-www-form-urlencoded;charset=UTF-8",
				async:false,
				data: jsonObj,
				success: function(result) {
					var typethreeList = result.typethreeList;
					for (var i = 0; i < typethreeList.length; i++) {
						$("#typethree").append("<option value='"+typethreeList[i].threetypeid+"'>"+typethreeList[i].threetypevalue+"</option>");
					}
				}
			}); 
		}else{
			$("#typethree option[value!='']").remove();
		}
	}
	
	function btnType3(){
		var typetwovalue = $("#typetwo").val().trim();
		if(typetwovalue !=null && typetwovalue != ""){
			
		}else{
			alert("请选择二级分类！");
		}
	}

转载于:https://my.oschina.net/u/2389884/blog/776202

weixin_34146805
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Struts2+jQuery+ajax+mySql实现省市二级联动
05-11
总的来说，结合Struts2、jQuery、ajax和MySQL，我们可以实现高效、流畅的省市二级联动效果，提供用户友好的Web界面。这四个技术的协同工作展示了现代Web开发中前后端交互的基本模式，对于任何想要学习Web开发的人来...
struts2 jquery json ajax 三级联动菜单
01-30
综上所述，这个项目展示了如何使用Struts2作为后端控制器，jQuery处理前端交互，Ajax实现异步数据传输，以及JSON作为数据交换格式，共同构建一个功能完善的三级联动菜单。开发者需要对这些技术有深入理解，才能有效...
ajax+struts2 实现省份-城市-地区三级联动
weixin_30414635的博客
10-24 122
1.需求分析 2.js部分（通过ajax异步请求实现） 省份-->城市联动 城市--》地区 3.struts部分 　　struts.xml 　　action部分 4.service部分 5.总结 　　通过这个demo可以巩固ajax的异步请求，以及struts2返回json格式的数据。 转载于:https://www.cn...
mysql 城市二级联动_Struts2+jQuery+ajax+mySql实现省市二级联动
weixin_29761519的博客
02-07 165
Struts2+jQuery+ajax+mySql实现省市二级联动Jquery的select操作集合jQuery获取Select选择的Text和Value:语法解释：1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发2. varcheckText=$("#select_id").find("op...
Hibernate+struts+JqueryAjax+jSON实现无刷新三级联动
java小酱油
04-05 3965
看网上JqueryAjax三级联动的例子不是很多。小弟自己写了一个，
ajax下拉栏三级联动,JQUERY 应用AJAX实现下拉列表框三级联动
weixin_42488542的博客
08-06 495
//移除option中的值function removeOp(selectId){var op = $("#"+selectId).children();if(op.length>1){for(var i=0;i{if(i>=1){document.getElementById(selectId).removeChild(op[i]);}}}}//三级下拉列表框的联动js//读出第二级...
jquery ajax java二级联动_jquery+json+ajax 二级联动
weixin_36155846的博客
02-16 102
createElement(name) 方法可创建元素节点。此方法可返回一个 Element 对象。参数name 字符串值，这个字符串可为此元素节点规定名称。如果 name 参数中含有不合法的字符，该方法将抛出代码为 INVALID_CHARACTER_ERR 的 DOMException 异常。appendChild(newchild) 方法可向节点的子节点列表的末尾添加新的子节点。Intern...
省市联动(struts2+ajax+非数据库)
码农1425的博客
10-30 293
//前台 代码$.ajax( { type:"POST", url:"${pageContext.request.contextPath}/findCityByProvinceRequest?id="+new Date().getTime(), data:{"province":province}, success:
struts2 ajax 二级菜单级联
guoxiaohuivip的博客
02-22 374
//页面code function replyMessage() { var cityCode = $("#code").val();         if (cityCode != null && cityCode != "") {         $("#hallname").children().eq(0).siblings().remove();             $.aj
三级联动的实例+struts2+hibernate3
08-09
在IT行业中，"三级联动...这个实例通过整合Struts2的控制层和Hibernate3的数据访问层，实现了高效、灵活的三级联动效果。理解并掌握这一实例，对于提升Java Web开发技能，尤其是处理动态交互和数据绑定，具有重要意义。
省市联动jquery+struts2
08-24
标题中的“省市联动jQuery+Struts2”是指在Web开发中使用jQuery库和Struts2框架实现的一个功能，即当用户选择一个省份时，相关的城市会动态地在下拉列表中加载出来，提供用户选择。这个功能在很多需要收集用户地址...
Struts2+hibernate3+JQuery+ajax+json三级联动
12-21
总的来说，这个“三级联动”项目展示了如何利用Struts2进行请求处理，Hibernate进行数据操作，JQuery实现前端交互，Ajax进行异步通信，以及Json进行数据交换。这是一个典型的Web应用开发实例，对于理解和掌握这些...
jquery ajax java二级联动_jquery的ajax实现二级联动
weixin_42356378的博客
02-16 124
第一步：引入struts整合json的插件包第二步：在struts.xml中定义：修改：修改成在Action中添加：第三步：页面使用jquery的ajax调用二级联动的js//ajax的二级联动，使用选择的所属单位，查询该所属单位下对应的单位名称列表function findJctUnit(o){//货物所属单位的文本内容var jct = $(o).find("option:selected")...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 463
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 586
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
最新发布
song854601134的博客
08-12 118
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值