jsp省市区3级联动

[javascript]  view plain  copy

1. </pre><pre name="code" class="html"><tr>  
2.                 <td>所在地:</td>  
3.                 <td>  
4.                     <select class="select" id="province_code" name="province_code" οnchange="getCity()">  
5.                         <option value="">请选择</option>  
6.                     </select>  
7.   
8.                     <select class="select" id="city_code" name="city_code" οnchange="getArea()">  
9.                         <option value="">请选择</option>  
10.                     </select>  
11.   
12.                     <select class="select" id="area_code" name="area_code">  
13.                         <option value="">请选择</option>  
14.                     </select>  
15.                 </td>  
16.             </tr>  

2.js代码

[html]  view plain  copy

1. <script type="text/javascript">  
2.     /*加载省下拉选*/  
3.     $(function () {  
4.         $.ajax({  
5.             type: "post",  
6.             url: "${ctx}/shop/area/getProvince",  
7.             success: function (data) {  
8.                 for (var i = 0; i < data.length; i++) {  
9.                     $('#province_code').append("<option value='" + data[i].id + "' >" + data[i].aName + "</option>");  
10.                 }  
11.             },  
12.             error: function () {  
13.                 alert("加载省失败");  
14.             }  
15.         });  
16.     });  
17.     /*加载市下拉选*/  
18.     function getCity() {  
19.         var id = $("#province_code").val();  
20.         $("#city_code").empty();  
21.         $("#area_code").empty();  
22.         $.ajax({  
23.             type: "post",  
24.             url: "${ctx}/shop/area/getCity",  
25.             data: {"id": id},  
26.             success: function (data) {  
27.                 $('#city_code').append("<option value='' selected='selected' >" + '请选择' + "</option>");  
28.                 $('#area_code').append("<option value='' selected='selected' >" + '请选择' + "</option>");  
29.                 for (var i = 0; i < data.length; i++) {  
30.                     $('#city_code').append("<option value='" + data[i].id + "' >" + data[i].aName + "</option>");  
31.                 }  
32.             },  
33.             error: function () {  
34.                 alert("加载市失败");  
35.             }  
36.         });  
37.     }  
38.     ;  
39.     /*加载地区下拉选*/  
40.     function getArea() {  
41.         var id = $("#city_code").val();  
42.         $("#area_code").empty();  
43.         $.ajax({  
44.             type: "post",  
45.             url: "${ctx}/shop/area/getArea",  
46.             data: {"id": id},  
47.             success: function (data) {  
48.                 $('#area_code').append("<option value='' selected='selected' >" + '请选择' + "</option>");  
49.                 for (var i = 0; i < data.length; i++) {  
50.                     $('#area_code').append("<option value='" + data[i].id + "' >" + data[i].aName + "</option>");  
51.                 }  
52.             },  
53.             error: function () {  
54.                 alert("加载区失败");  
55.             }  
56.         });  
57.     }  

3.dao层文件

[java]  view plain  copy

1. public interface AreaDao {  
2.       
3.     List<Area> queryAreas(Integer pid);  
4.   
5.     Area queryAreasInfo(Integer id);  
6.   
7.     public List<Area> queryCity(Integer id);  
8. }  

4.Area实体类

[html]  view plain  copy

1. public class Area {  
2.     private Integer id;  
3.     private String aName;  
4.     private Integer pid;  
5.     private Integer status;  
6.     public Integer getId() {  
7.         return id;  
8.     }  
9.     public Integer getPid() {  
10.         return pid;  
11.     }  
12.     public Integer getStatus() {  
13.         return status;  
14.     }  
15.     public void setId(Integer id) {  
16.         this.id = id;  
17.     }  
18.     public void setPid(Integer pid) {  
19.         this.pid = pid;  
20.     }  
21.     public void setStatus(Integer status) {  
22.         this.status = status;  
23.     }  
24.   
25.     public String getaName() {  
26.         return aName;  
27.     }  
28.   
29.     public void setaName(String aName) {  
30.         this.aName = aName;  
31.     }  
32.   
33.     @Override  
34.     public String toString() {  
35.         return "Area [id=" + id + ", aName=" + aName + ", pid=" + pid  
36.                 + ", status=" + status + "]";  
37.     }  
38.       
39. }  

5.Service层

[java]  view plain  copy

1. @Service  
2. @Transactional(readOnly = true)  
3. public class AreasService  {  
4.   
5.     @Resource  
6.     private AreaDao areasDao;  
7.   
8.     /** 
9.      * 通过pid查询Areas 
10.      */  
11.   
12.     public List<Area> queryAreas(Integer pid) {  
13.   
14.         return this.areasDao.queryAreas(pid);  
15.     }  
16.   
17.     public Area queryArea(Integer id){  
18.         return this.areasDao.queryAreasInfo(id);  
19.     }  
20.   
21.   
22.   
23. }  

6.Controller层

[java]  view plain  copy

1. @RequestMapping("/shop/area")  
2. @Controller  
3. public class AreaController {  
4.     @Autowired  
5.     private AreasService areasService;  
6.   
7.     @RequestMapping(value="getProvince" ,method  = RequestMethod.POST)  
8.     @ResponseBody  
9.     public List<Area> getProvince(){  
10.         List<Area> areas=areasService.queryAreas(0);  
11.         return areas;  
12.     }  
13.   
14.     @RequestMapping(value="getCity" ,method  = RequestMethod.POST)  
15.     @ResponseBody  
16.     public List<Area> getCity(Integer id){  
17.         List<Area> areas=areasService.queryAreas(id);  
18.         return areas;  
19.     }  
20.     @RequestMapping(value="getArea" ,method  = RequestMethod.POST)  
21.     @ResponseBody  
22.     public List<Area> getArea(Integer id){  
23.         List<Area> areas=areasService.queryAreas(id);  
24.         return areas;  
25.     }  
26.   
27. }  

7.Mapper.xml文件

[html]  view plain  copy

1. <?xml version="1.0" encoding="UTF-8" ?>  
2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >  
3. <mapper namespace="com.***.location.dao.AreaDao" >  
4.   
5.   
6.     <select id="queryAreas" resultType="Area" >  
7.         SELECT * FROM area WHERE  pid=#{pid}  
8.     </select>  
9.   
10.     <select id="queryAreasInfo" resultType="Area" >  
11.         SELECT * FROM area WHERE  id=#{id}  
12.     </select>  
13.   
14.   
15. </mapper>  

8.Oracle数据库结构

省市区在一个表 ，表名是AREA ，主键是ID ，省的PID=0 ， 市级的PID=省的ID，区级的PID=市级的ID

如：

ID                   ANAME         PID

100034          河南省           0

100101          郑州市         100034

100102         濮阳市          100034  

111111         中原区          100101

111112          金水区         100101

111113         高新区          100101