实现选择省份城市也跟着动态变化
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(上面有代码),就能达到预期效果啦