java jsp js 实现地区表三级联动，并修改时数据回显

本文链接：https://blog.youkuaiyun.com/liujava621/article/details/32713375

这篇博客介绍了如何使用Java、JSP和JavaScript实现一个三级联动的地区选择功能，当用户在选择不同级别的地区时，会通过AJAX动态加载下级地区选项。同时，文章还展示了如何在数据回显时设置已选的地区选项。代码中包含了一个名为`levelCheck`的Java方法，用于根据给定ID获取相应的地区层级信息。

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

js:方法

//下一级
function areaNext(id){
	if($("#area"+id).val() == 0){
		 document.getElementById("area1"+id).options[0].selected=true;
		 document.getElementById("area2"+id).options[0].selected=true;
		 document.getElementById("area1"+id).length=1;
		 document.getElementById("area2"+id).length=1;
	}else{
		$.ajax({
	        type: 'post',
	        url: "/LovePatPrint/web/member!getCity?ProvinceId=" + $("#area"+id).val(),
	        success: function(text) {
	            $("#area1"+id).html(text);
	            document.getElementById("area1"+id).options[1].selected=true;
	            $.ajax({
	                type: 'post',
	                url: "/LovePatPrint/web/member!getDistrict?cityId=" + $("#area1"+id).val(),
	                success:function(text){
	                	 $("#area2"+id).html(text);
	                	 document.getElementById("area2"+id).options[1].selected=true;
	                },
	                error: function(xx) {
	                    alert("网络异常");
	                }
	            });
	        },
	        error: function(xx) {
	        	 alert("网络异常");
	        }
	    });
	}
}
//三级
function threeNext(id){
	if($("#area1"+id).val() == 0){
		 document.getElementById("area2"+id).options[0].selected=true;
		 document.getElementById("area2"+id).length=1;
	}else{
		$.ajax({
	        type: 'post',
	        url: "/LovePatPrint/web/member!getDistrict?cityId=" + $("#area1"+id).val(),
	        success: function(text) {
	            $("#area2"+id).html(text);
	            document.getElementById("area2"+id).options[1].selected=true;
	        },
	        error: function(xx) {
	        	 alert("网络异常");
	        }
	    });
	}
}

jsp:方法

<pre name="code" class="html"><select id="area11" name="area11" οnchange="areaNext(11);">
				
				<option value="0">--请选择--</option>
				<s:iterator value="areaList" var="al">
			    <option value="<s:property value="#al.countryAreaId"/>"><s:property value="#al.areaName"/></option>
			    </s:iterator>
				</select>
				<script>
				document.getElementById("area11").value = ${one };
				</script>
				<select id="area111" name="area111" οnchange="threeNext(11);">
				
				<option value="0">--请选择--</option>
				<s:iterator value="areaList2" var="al">
			    <option value="<s:property value="#al.countryAreaId"/>"><s:property value="#al.areaName"/></option>
			    </s:iterator>
			    
				</select>
				<script>
				document.getElementById("area111").value = ${two }
				</script>
				<select id="area211" name="area211">
				
				<option value="0">--请选择--</option>
				<s:iterator value="areaList3" var="al">
			    <option value="<s:property value="#al.countryAreaId"/>"><s:property value="#al.areaName"/></option>
			    </s:iterator>
				
				</select>
				<script>
				document.getElementById("area211").value = ${three }
				<span style="font-family: Arial, Helvetica, sans-serif;"></script></span>

java：代码实现

        /**
	 * 地域级别验证
	 * @author lmc
	 * @time 2014-6-20 13:17:04
	 */
	public void levelCheck(int id){
		String areaHql="from Area where countryAreaId="+id;
		areaPojo=areaService.getArea(areaHql);
		if(areaPojo.getParentId() == 0){
			//顶级ID
			
			String hql=" select *  from area where parent_id=0";
			areaList = areaService.getAreaList(hql);
			one = areaPojo.getCountryAreaId();
		}else{
			//判断是三级或是二级
			String hql="from Area where countryAreaId="+areaPojo.getParentId();
			areaPojo2 = areaService.getArea(hql);
			if(areaPojo2.getParentId() == 0){
				//二级ID
				
				//顶级集合
				areaList = areaService.getAreaList("select *  from area where parent_id=0");
				one = areaPojo2.getCountryAreaId();
				//二级集合
				areaList2 =  areaService.getAreaList("select *  from area where parent_id="+one);
				two = areaPojo.getCountryAreaId();
			}else{
				//三级ID
				
				//顶级集合
				areaList = areaService.getAreaList("select *  from area where parent_id=0");
				one = areaPojo2.getParentId();
				//二级集合
				areaList2 =  areaService.getAreaList("select *  from area where parent_id="+one);
				two = areaPojo.getParentId();
				//三级集合
				areaList3 =  areaService.getAreaList("select *  from area where parent_id="+two);
				three = id;
			}
		}
		
	}

注：仅供参考，若更好的方法请分享。。。。