运行效果:
=================================================
部分代码:
=================================================
当然首先你数据库中要有这个table,不然你没有数据.....^_^
1 <tr>
2 <td class="tr pr10 ">
3 所在地:
4 </td>
5 <td class="tl">
6 <input type="hidden" id="myProvince" value="${user.provinceId}"/>
7 <input type="hidden" id="myCity" value="${user.cityId}"/>
8 <input type="hidden" id="myRegion" value="${user.regionId}"/>
9 <select id="provinceSelect" name="user.provinceId">
10 <c:forEach items="${xzqhs}" var="xzqh">
11 <option value="${xzqh.provinceId}" ${user.regionId eq xzqh.provinceId?"selected='selected'":""}>${xzqh.province}</option>
12 </c:forEach>
13 </select>
14 <select id="citySelect" name="user.cityId">
15 </select>
16 <select id="regionSelect" name="user.regionId">
17 </select>
18 </td>
19 <td class="gray"></td>
20 </tr>
js代码:
1 /**
2 * 加载市
3 *
4 */
5 function loadCity() {
6 var provinceId = $("#provinceSelect option:selected").val();
7 if(provinceId == null || provinceId == ""){
8 //alert("找不到省");
9 }else{
10 $.post(rootPath+"/loadCity", {
11 "q" : provinceId
12 }, function(data, result) {
13 if(data == "noId"){
14 alert("请求错误");
15 }else if(data == "null"){
16 alert("系统找不到属于该省的市");
17 }else{
18 data = eval("{" + data + "}");
19 var citySelect = $("#citySelect");
20 var myCity = $("#myCity").val();
21 citySelect.html("");
22 for ( var i = 0; i < data.length; i++) {
23 if(myCity != null && myCity != "" && myCity > 0 && myCity == data[i].id){
24 citySelect.append("<option selected='selected' value='" + data[i].id + "'>"
25 + data[i].name + "</option>");
26 }else{
27 citySelect.append("<option value='" + data[i].id + "'>"
28 + data[i].name + "</option>");
29 }
30 }
31 loadRegion();
32 }
33 });
34 }
35 };
36
37 /**
38 * 加载区
39 *
40 */
41 function loadRegion() {
42 var cityId = $("#citySelect option:selected").val();
43 if(cityId == null || cityId == "" || cityId < 1){
44 alert("找不到市");
45 }else{
46 $.post(rootPath+"/loadRegion", {
47 "q" : cityId
48 }, function(data, result) {
49 if(data == "noId"){
50 alert("请求错误");
51 }else if(data == "null"){
52 alert("系统找不到属于该市的区");
53 }else{
54 data = eval("{" + data + "}");
55 var regionSelect = $("#regionSelect");
56 var myRegion = $("#myRegion").val();
57 regionSelect.html("");
58 for ( var i = 0; i < data.length; i++) {
59 if(myRegion != null && myRegion != "" && myRegion > 0 && myRegion == data[i].id){
60 regionSelect.append("<option selected='selected' value='" + data[i].id + "'>"
61 + data[i].name + "</option>");
62 }else{
63 regionSelect.append("<option value='" + data[i].id + "'>"
64 + data[i].name + "</option>");
65 }
66 }
67 }
68 });
69 }
70 };
71
72 /**
73 * 省改变事件
74 *
75 */
76 $("#provinceSelect").change(loadCity);
77
78 /**
79 * 市改变事件
80 *
81 */
82 $("#citySelect").change(loadRegion);
83
84
85 $(function() {
86 loadCity();
87 });
88
89
90
91
92
后台方法:
1 /**
2 * 加载城市数据
3 *
4 */
5 public void loadCity() {
6 if (q == null || q.trim().equals("")) {
7 write("noId");
8 } else {
9 List<Xzqh> citys = xzqhService.queryCitys(q.trim());
10 if (citys == null || citys.size() < 1) {
11 write("null");
12 } else {
13 StringBuilder builder = new StringBuilder("[");
14 for (Xzqh city : citys) {
15 builder.append("{'id':'");
16 builder.append(city.getCityId());
17 builder.append("','name':'");
18 builder.append(city.getCity());
19 builder.append("'},");
20 }
21 if (builder.length() > 1)
22 builder.replace(builder.length() - 1, builder.length(), "]");
23 write(builder.toString());
24 }
25 }
26 }
27
28 /**
29 * 加载区数据
30 *
31 */
32 public void loadRegion() {
33 if (q == null || q.trim().equals("")) {
34 write("noId");
35 } else {
36 List<Xzqh> citys = xzqhService.queryDistricts(q.trim());
37 if (citys == null || citys.size() < 1) {
38 write("null");
39 } else {
40 StringBuilder builder = new StringBuilder("[");
41 for (Xzqh district : citys) {
42 builder.append("{'id':'");
43 builder.append(district.getRegionId());
44 builder.append("','name':'");
45 builder.append(district.getRegion());
46 builder.append("'},");
47 }
48 if (builder.length() > 1)
49 builder.replace(builder.length() - 1, builder.length(), "]");
50 write(builder.toString());
51 }
52 }
53 }