javaweb实现地区联动

一,配置好相应的环境,导入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>');
                    });
                    
                });
            });
            })

猜你喜欢

转载自blog.csdn.net/qq_33371372/article/details/80245725