给大家分享一个省市区选择框_js实现

 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>

 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     }