實現選擇省份城市也跟著動態變化

1.建立資料庫

我的例子是：三個屬性scode（唯一標識一個省份或一個城市），sname（省份或城市的名稱），pcode（省份的為0，城市的為省份的scode）

2.在jsp頁面獲得選中的省份的scode

<tr>
								<td style="width:75px;text-align: right;padding-top: 13px;">公司省份:</td>
								<td>
									<select class="chosen-select form-control" name="COMPANY_PROVINCE"
											id="COMPANY_PROVINCE" style="width:98%;"  onchange="change()"
											datatype="*" nullmsg="請選擇省份">
										<option value="">請選擇省份</option>
										<c:forEach items="${tmcitys}" var="tmcity">
											<option value="${tmcity.scode}">${tmcity.sname}</option>
										</c:forEach>
									</select>
								</td>
							</tr>
 

3.

 function change() {
            var ajaxData = $("#COMPANY_PROVINCE").val();//.find("option:selected").text() find("option:selected").//獲得選中的省份的scode
            $.ajax({
                type: 'POST',
				url: "<%=basePath%>tmcompany/addCity.do",
				data: {"province_id":ajaxData},
                dataType: 'json',
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                success: function (data) {
                    document.getElementById("COMPANY_CITY").innerHTML = "";
				    console.log(data);
                    if (data.msg == "success") {
                        for(var i=0;i<data.varList.length;i++){
                            $("#COMPANY_CITY").append('<option value="' +data.varList[i].scode + '">' +data.varList[i].sname + '</option>')

                        }

                    } else if (data.msg == "error") {
                        alert('提交失敗,請重新整理重試', {icon: 2});
                    }
                },
                error: function (data) {
                    alert("error = " + data);
                }
            });
        }
 

5.在後臺根據scode查詢pcode'相等的城市的scode，返回給前臺

6. 

/**傳回城市頁面
	 * @param
	 * @throws Exception
	 */
	@RequestMapping(value="/addCity")
	@ResponseBody
	public Object addCity()throws Exception{
		PageData pd = new PageData();
		pd = this.getPageData();
		Map<String, Object> map = new HashMap<String, Object>();
		String province_id = pd.getString("province_id");
		pd.put("provice_id",province_id.trim());
		List<PageData>	varList = tmCityService.findByProvince(pd);
		map.put("varList", varList);
		map.put("msg", "success");
		return AppUtil.returnObject(pd, map);
	}