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,"台湾省"]]
市、区返回格式也同样。
相关文章推荐
- 【JavaScript 6—基础知识点】:正则表达式(应用)
- 【JavaScript 6—基础知识点】:正则表达式(应用)
- JavaScript中setUTCMilliseconds()方法的使用详解
- js正则表达式语法
- JavaScript中setUTCFullYear()方法的使用简介
- 正则表达式---JS
- JSTL function 标签 使用
- 盲目自信后的JavaScript沉淀
- json解析NSJSONSerialization方法
- 你真得懂Javascript中的==等于运算符吗?
- json解析使用第三方类库JSONKit
- jsp 使内容变成灰色 不可编辑
- jsp 获取当前页面时间 并对时间进行比较
- Encode_1
- Js_Js_js
- JavaScript中产生标识符方式的演变
- Test4002
- jsp页面显示文件内容有中文乱码问题
- 分享关于js解析URL中的参数的方法
- js弹出放大图