运行效果： ================================================= 部分代码： ================================================= 当然首先你数据库中要有这个table，不然你没有数据.....^_^ 复制代码 代码如下: <tr> <td class="tr pr10 "> 所在地: </td> <td class="tl"> <input type="hidden" id="myProvince" value="${user.provinceId}"/> <input type="hidden" id="myCity" value="${user.cityId}"/> <input type="hidden" id="myRegion" value="${user.regionId}"/> <select id="provinceSelect" name="user.provinceId"> <c:forEach items="${xzqhs}" var="xzqh"> <option value="${xzqh.provinceId}" ${user.regionId eq xzqh.provinceId?"selected='selected'":""}>${xzqh.province}</option> </c:forEach> </select> <select id="citySelect" name="user.cityId"> </select> <select id="regionSelect" name="user.regionId"> </select> </td> <td class="gray"></td> </tr> 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 < data.length; i++) { if(myCity != null && myCity != "" && myCity > 0 && myCity == data[i].id){ citySelect.append("<option selected='selected' value='" + data[i].id + "'>" + data[i].name + "</option>"); }else{ citySelect.append("<option value='" + data[i].id + "'>" + data[i].name + "</option>"); } } loadRegion(); } }); } }; /** * 加载区 * */ function loadRegion() { var cityId = $("#citySelect option:selected").val(); if(cityId == null || cityId == "" || cityId < 1){ 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 < data.length; i++) { if(myRegion != null && myRegion != "" && myRegion > 0 && myRegion == data[i].id){ regionSelect.append("<option selected='selected' value='" + data[i].id + "'>" + data[i].name + "</option>"); }else{ regionSelect.append("<option value='" + data[i].id + "'>" + data[i].name + "</option>"); } } } }); } }; /** * 省改变事件 * */ $("#provinceSelect").change(loadCity); /** * 市改变事件 * */ $("#citySelect").change(loadRegion); $(function() { loadCity(); }); 后台方法： 复制代码 代码如下: /** * 加载城市数据 * */ public void loadCity() { if (q == null || q.trim().equals("")) { write("noId"); } else { List<Xzqh> citys = xzqhService.queryCitys(q.trim()); if (citys == null || citys.size() < 1) { 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<Xzqh> citys = xzqhService.queryDistricts(q.trim()); if (citys == null || citys.size() < 1) { 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()); } } }

　　推荐阅读

　　输入数量和价格自动计算输出金额的js代码

数量: 单价: 总价: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]>>>详细阅读

本文标题：js实现一个省市区三级联动选择框代码分享

地址：http://www.17bianji.com/kaifa2/JS/22279.html

 1/2    1