JS、JSP省市区切换

来源：互联网发布：网络社区编辑：程序博客网时间：2024/06/18 03:59

<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,"台湾省"]]

市、区返回格式也同样。

0 0