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