您的位置:首页 > Web前端 > JavaScript

JS、JSP省市区切换

2015-06-12 09:31 555 查看
<label>省:
<select id="province" class="form-control input-sm" >
<option value="">请选择</option>
</select>
</label>
<label>市:
<select id="city">
<option value="">请选择</option>
</select>
</label>

<label>区:
<select id="district">
<option value="">请选择</option>
</select>
</label>

上述为JSP代码。

$(document).ready(function () {
$.post("userAction!getAllProvince", function (data) {
var jsonObj = eval("(" + data + ")");
for (var i = 0; i < jsonObj.length; i++) {
var $option = $("<option></option>");
var row=jsonObj[i];
$option.attr("value", row[0]);
$option.text(row[1]);
$("#province").append($option);
}
});
/* 根据省份获取城市 */
$("#province").change(function () {
$.post("userAction!getCityByPid", {pid:$("#province").val()}, function (data) {
/* 清空城市 */
$("#city option[value!='']").remove();
/* 清空乡镇 */
$("#district option[value!='']").remove();
var jsonObj = eval("(" + data + ")");
for (var i = 0; i < jsonObj.length; i++) {
var $option = $("<option></option>");
var row=jsonObj[i];
$option.attr("value", row[0]);
$option.text(row[1]);
$("#city").append($option);
}
});
});
/* 根据城市获取乡镇 */
$("#city").change(function () {
if($("#district").length>0){
$.post("userAction!getDistrictByCid", {cid:$("#city").val()}, function (data) {
/* 清空乡镇 */
$("#district option[value!='']").remove();
var jsonObj = eval("(" + data + ")");
for (var i = 0; i < jsonObj.length; i++) {
var $option = $("<option></option>");
var row=jsonObj[i];
for(var p in row) {
$option.attr("value", row[0]);
$option.text(row[p]);
}
$("#district").append($option);
}
});
}
<span style="white-space:pre">	</span>});
});


上述为所有JS代码。

public void getAllProvince(HttpServletResponse response) {
List<Province> provinceList = provinceidao.getAllPProvince();
JSONArray jsonArray = JSONArray.fromObject(provinceList);
try {
CommonUtil.printResult(response,jsonArray);
} catch (IOException e) {
<span style="white-space:pre">	</span>e.printStackTrace();
}
}


/**
* 获取城市
*/
public void getCityByPid(int pid,HttpServletResponse response) {
List<City> cityList = cityidao.getByPidCitys(pid);
JSONArray jsonArray = JSONArray.fromObject(cityList);
try {
CommonUtil.printResult(response, jsonArray);
} catch (IOException e) {
e.printStackTrace();
}

}


/**
* 获取乡镇
*/
public void getDistrictByCid(int cid,HttpServletResponse response) {
List<District > districtList = districtidao.getByCidDistricts(cid);
JSONArray jsonArray = JSONArray.fromObject(districtList);
try {
CommonUtil.printResult(response, jsonArray);
} catch (IOException e) {
e.printStackTrace();
}
}


上述为action中代码。

action中返回给JS的数据格式:

[[1,"北京市"],[2,"天津市"],[3,"河北省"],[4,"山西省"],[5,"内蒙古自治区"],[6,"辽宁省"],[7,"吉林省"],[8,"黑龙江省"],[9,"上海市"],[10,"
江苏省"],[11,"浙江省"],[12,"安徽省"],[13,"福建省"],[14,"江西省"],[15,"山东省"],[16,"河南省"],[17,"湖北省"],[18,"湖南省"],[19,"广
东省"],[20,"广西壮族自治区"],[21,"海南省"],[22,"重庆市"],[23,"四川省"],[24,"贵州省"],[25,"云南省"],[26,"西藏自治区"],[27,"陕西省"],[28
,"甘肃省"],[29,"青海省"],[30,"宁夏回族自治区"],[31,"新疆维吾尔自治区"],[32,"香港特别行政区"],[33,"澳门特别行政区"],[34,"台湾省"]]


市、区返回格式也同样。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: