javaweb实现地区联动

最新推荐文章于 2025-06-14 18:19:43 发布

SILENT-NIGHT

最新推荐文章于 2025-06-14 18:19:43 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb jquery 前端

本文链接：https://blog.youkuaiyun.com/qq_33371372/article/details/80245725

JavaWeb 同时被 3 个专栏收录

8 篇文章

订阅专栏

jquery

3 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

本文介绍如何使用Struts2框架实现地区级联选择功能，包括配置环境、Action层处理逻辑及前后台交互代码。通过Ajax技术动态加载省市区数据，并解决了JS代码外提后EL表达式失效的问题。

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

一，配置好相应的环境，导入jar包

commons-lang-1.0.4.jar
commons-collections-2.1.jar
commons-beanutils-1.8.0.jar
json-lib-2.4.jar
ezmorph-1.0.6.jar
commons-logging-1.1.jar

二，Action层

部分代码：

public String area() {
		DetachedCriteria criteria = DetachedCriteria.forClass(Region.class);
			criteria.add(Restrictions.eq("parentId", Double.parseDouble(regionId)));
			List<Region> list = utilsService.getArea(criteria);//接受查询到的list集合
			String json = JSONArray.fromObject(list).toString();//转为json格式
			ServletActionContext.getResponse().setContentType("application/json;charset=utf-8");
			try {
				ServletActionContext.getResponse().getWriter().write(json);
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
				addActionError("内部错误，请联系管理员！");
			}
			return null;
		}

三，前台代码

jsp:

<span id="area">
	家庭住址：<select id="pro">
    	<option value="">请选择省</option>
	</select>
	<select id="city">
   	 	<option value="">请选择市</option>
	</select>
	<select id="dis">
    	<option value="">请选择区</option>
	</select>
	</span>

js:

$(function () {
            //获取省
            pro=$('#pro')
            $.get('${pageContext.request.contextPath}/utils/utilsAction_area.action',function (dic) {
                $.each(dic,function (index,item) {
                    pro.append('<option value="'+item.regionId+'">'+item.regionName+'</option>')
                })
            })
           $('#pro').change(function () {
                //area140000/
                $.get('${pageContext.request.contextPath}/utils/utilsAction_area.action?regionId='+$(this).val(),function (list) {
                    city=$('#city');
                    city.empty().append('<option value="0">请选择市</option>')
                    $('#dis').empty().append('<option value="0">请选择区县</option>')
                    //{data:[{id:1,title:北京},{id:2,title:天津},...]}
                    $.each(list,function (index, item) {
                        //{id:1,title:北京}
                        city.append('<option value="'+item.regionId+'">'+item.regionName+'</option>');
                    });
                });
            });
             //查询区县的信息
            $('#city').change(function () {
                $.get('${pageContext.request.contextPath}/utils/utilsAction_area.action?regionId='+$(this).val(),function (list) {
                    dis=$('#dis').empty().append('<option value="0">请选择区县</option>');
                    $.each(list,function (index, item) {
                       dis.append('<option value="'+item.regionId+'">'+item.regionName+'</option>');
                    });
                    
                });
            });
            })

注：将js代码放在jsp页面感觉不太整洁，再将代码外提后发现js文件中的一些EL表达式失效

解决办法：将外提的js代码文件后缀改为.jsp,并在头部加入相应的标签

如：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib prefix="s" uri="/struts-tags" %> 
$(function () {
            //获取省
            pro=$('#pro')
            $.get('${pageContext.request.contextPath}/utils/utilsAction_area.action',function (dic) {
                $.each(dic,function (index,item) {
                    pro.append('<option value="'+item.regionId+'">'+item.regionName+'</option>')
                })
            })
           $('#pro').change(function () {
                //area140000/
                $.get('${pageContext.request.contextPath}/utils/utilsAction_area.action?regionId='+$(this).val(),function (list) {
                    city=$('#city');
                    city.empty().append('<option value="0">请选择市</option>')
                    $('#dis').empty().append('<option value="0">请选择区县</option>')
                    //{data:[{id:1,title:北京},{id:2,title:天津},...]}
                    $.each(list,function (index, item) {
                        //{id:1,title:北京}
                        city.append('<option value="'+item.regionId+'">'+item.regionName+'</option>');
                    });
                });
            });
             //查询区县的信息
            $('#city').change(function () {
                $.get('${pageContext.request.contextPath}/utils/utilsAction_area.action?regionId='+$(this).val(),function (list) {
                    dis=$('#dis').empty().append('<option value="0">请选择区县</option>');
                    $.each(list,function (index, item) {
                       dis.append('<option value="'+item.regionId+'">'+item.regionName+'</option>');
                    });
                    
                });
            });
            })
$(function () {
            //获取省
            pro=$('#pro')
            $.get('${pageContext.request.contextPath}/utils/utilsAction_area.action',function (dic) {
                $.each(dic,function (index,item) {
                    pro.append('<option value="'+item.regionId+'">'+item.regionName+'</option>')
                })
            })
           $('#pro').change(function () {
                //area140000/
                $.get('${pageContext.request.contextPath}/utils/utilsAction_area.action?regionId='+$(this).val(),function (list) {
                    city=$('#city');
                    city.empty().append('<option value="0">请选择市</option>')
                    $('#dis').empty().append('<option value="0">请选择区县</option>')
                    //{data:[{id:1,title:北京},{id:2,title:天津},...]}
                    $.each(list,function (index, item) {
                        //{id:1,title:北京}
                        city.append('<option value="'+item.regionId+'">'+item.regionName+'</option>');
                    });
                });
            });
             //查询区县的信息
            $('#city').change(function () {
                $.get('${pageContext.request.contextPath}/utils/utilsAction_area.action?regionId='+$(this).val(),function (list) {
                    dis=$('#dis').empty().append('<option value="0">请选择区县</option>');
                    $.each(list,function (index, item) {
                       dis.append('<option value="'+item.regionId+'">'+item.regionName+'</option>');
                    });
                    
                });
            });
            })