最近做项目用到这个东西,网上找了很多资料都不是很全面或者是不太好理解(主要是设计到hibernate的一部分),小弟在前人的基础上跟进一下,贴出来分享分享.
//
数据库设计:
RowID Proince City District
///
DWR.XML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create javascript="province" creator="spring" scope="session">
<param name="beanName" value="KcGeoDAO"></param>
</create>
<convert converter="bean" match="com.XXX.hibernate.pojo.KcGeo" ></convert>
</allow>
</dwr>
///
ProDAO.Java
public Map getPro(){
Map map = new HashMap();
String query ="from KcGeo ";
List list = getHibernateTemplate().find(query);
for(Object obj:list){
KcGeo geo=(KcGeo) obj;
map.put(geo.getProvince(), geo.getProvince());
}
return map;
}
public Map getCity(String province){
Map map=new HashMap();
String query="from KcGeo where province= '"+province+"' ";
List list=this.getHibernateTemplate().find(query);
for(Object obj:list){
KcGeo p=(KcGeo) obj;
map.put(p.getCity(), p.getCity());
}
return map;
}
public Map getDistrict(String city){
Map map=new HashMap();
String query="from KcGeo where city='"+city+"' ";
List list=this.getHibernateTemplate().find(query);
for(Object obj:list){
KcGeo p=(KcGeo) obj;
map.put(p.getDistrict(), p.getDistrict());
}
return map;
}
Pro.js
//获得省
function getPro(){
var obj_Pro = document.getElementById("sel_Pro");
//调用dao的方法
province.getPro(proReturn);
}
//回调函数
function proReturn(data){
var obj_Pro=document.getElementById("sel_Pro");
DWRUtil.removeAllOptions(obj_Pro);
DWRUtil.addOptions(obj_Pro,{
'':'请选择'
});
DWRUtil.addOptions(obj_Pro,data);
}
//根据省获得市
function getCity(){
var obj_Pro = document.getElementById("sel_Pro");
var obj_City = document.getElementById("sel_City");
var obj_County = document.getElementById("sel_County");
var pro_Index = obj_Pro.selectedIndex;
var pro_Value = obj_Pro.options[pro_Index].value;
if(pro_Value != "" && pro_Value != null){
province.getCity(pro_Value,cityReturn);
}else{
DWRUtil.removeAllOptions(obj_City);
DWRUtil.addOptions(obj_City,{
'':'请选择'
});
DWRUtil.removeAllOptions(obj_County);
DWRUtil.addOptions(obj_County,{
'':'请选择'
});
}
}
// 回调函数
function cityReturn(data){
var obj_City = document.getElementById("sel_City");
DWRUtil.removeAllOptions(obj_City);
DWRUtil.addOptions(obj_City,{
'':'请选择'
});
DWRUtil.addOptions(obj_City,data);
}
// 根据选择的市,获得所辖的县
function getCounty(){
var obj_Pro = document.getElementById("sel_Pro");
var obj_City = document.getElementById("sel_City");
var obj_County = document.getElementById("sel_County");
var city_Index = obj_City.selectedIndex;
var city_Value = obj_City.options[city_Index].value;
if(city_Value != "" && city_Value != null){
province.getDistrict(city_Value,countyReturn);
}else{
DWRUtil.removeAllOptions(obj_County);
DWRUtil.addOptions(obj_County,{
'':'请选择'
});
}
}
// 回调函数
function countyReturn(data){
var obj_County = document.getElementById("sel_County");
DWRUtil.removeAllOptions(obj_County);
DWRUtil.addOptions(obj_County,{
'':'请选择'
});
DWRUtil.addOptions(obj_County,data);
}
///
index.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>省市县三级联动</title>
<script type="text/javascript" src="/XXX/dwr/interface/province.js"></script>
<script type="text/javascript" src="/X XX/dwr/engine.js"></script>
<script type="text/javascript" src="/XXX/dwr/util.js"></script>
<script type="text/javascript" src="/XXX/js/pro.js"></script>
</head>
<body οnlοad="getPro()">
<table>
<tr><h3>省市县三级联动</h3></tr>
<tr>
<td>省:</td>
<td><select id="sel_Pro" οnchange="getCity()" >
<option value="">请选择</option>
</select>
</td>
<td>
<td>市:</td>
<td>
<select id="sel_City" οnchange="getCounty()">
<option value="">请选择</option>
</select>
</td>
<td>县:</td>
<td>
<select id="sel_County">
<option value="">请选择</option>
</select>
</td>
</tr>
</table>
</body>
</html>
OK,大功告成!2009-12-29