js实现一个省市区三级联动选择框代码分享_javascript技巧

运行效果： ================================================= 部分代码： ================================================= 当然首先你数据库中要有这个table，不然你没有数据.....^_^ 复制代码 代码如下: 所在地: js代码： 复制代码 代码如下: /** * 加载市 * */ function loadCity() { var provinceId = $("#provinceSelect option:selected").val(); if(provinceId == null || provinceId == ""){ //alert("找不到省"); }else{ $.post(rootPath+"/loadCity", { "q" : provinceId }, function(data, result) { if(data == "noId"){ alert("请求错误"); }else if(data == "null"){ alert("系统找不到属于该省的市"); }else{ data = eval("{" + data + "}"); var citySelect = $("#citySelect"); var myCity = $("#myCity").val(); citySelect.html(""); for ( var i = 0; i if(myCity != null && myCity != "" && myCity > 0 && myCity == data[i].id){ citySelect.append(""); }else{ citySelect.append(""); } } loadRegion(); } }); } }; /** * 加载区 * */ function loadRegion() { var cityId = $("#citySelect option:selected").val(); if(cityId == null || cityId == "" || cityId alert("找不到市"); }else{ $.post(rootPath+"/loadRegion", { "q" : cityId }, function(data, result) { if(data == "noId"){ alert("请求错误"); }else if(data == "null"){ alert("系统找不到属于该市的区"); }else{ data = eval("{" + data + "}"); var regionSelect = $("#regionSelect"); var myRegion = $("#myRegion").val(); regionSelect.html(""); for ( var i = 0; i if(myRegion != null && myRegion != "" && myRegion > 0 && myRegion == data[i].id){ regionSelect.append(""); }else{ regionSelect.append(""); } } } }); } }; /** * 省改变事件 * */ $("#provinceSelect").change(loadCity); /** * 市改变事件 * */ $("#citySelect").change(loadRegion); $(function() { loadCity(); }); 后台方法： 复制代码 代码如下: /** * 加载城市数据 * */ public void loadCity() { if (q == null || q.trim().equals("")) { write("noId"); } else { List citys = xzqhService.queryCitys(q.trim()); if (citys == null || citys.size() write("null"); } else { StringBuilder builder = new StringBuilder("["); for (Xzqh city : citys) { builder.append("{'id':'"); builder.append(city.getCityId()); builder.append("','name':'"); builder.append(city.getCity()); builder.append("'},"); } if (builder.length() > 1) builder.replace(builder.length() - 1, builder.length(), "]"); write(builder.toString()); } } } /** * 加载区数据 * */ public void loadRegion() { if (q == null || q.trim().equals("")) { write("noId"); } else { List citys = xzqhService.queryDistricts(q.trim()); if (citys == null || citys.size() write("null"); } else { StringBuilder builder = new StringBuilder("["); for (Xzqh district : citys) { builder.append("{'id':'"); builder.append(district.getRegionId()); builder.append("','name':'"); builder.append(district.getRegion()); builder.append("'},"); } if (builder.length() > 1) builder.replace(builder.length() - 1, builder.length(), "]"); write(builder.toString()); } } }