实现选择省份城市也跟着动态变化
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%;" οnchange="change()" datatype="*" nullmsg="请选择省份"> <option value="">请选择省份</option> <c:forEach items="${tmcitys}" var="tmcity"> <option value="${tmcity.scode}">${tmcity.sname}</option> </c:forEach> </select> </td> </tr> onchange当省份值改变是执行change函数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); } }); } 4.获得的省份scode封装成json传到后台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); } 7.在 前台获得map返回的数组，遍历数组，动态在js里写option（上面有代码），就能达到预期效果啦
