springmvc+jquery实现省市区地址下拉框联动
参考资料：http://www.cnblogs.com/whgw/archive/2012/05/11/2496667.html
1.jsp页面实现
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%> <link rel="stylesheet" href="/Public/backend/js/kindeditor/themes/default/default.css" /> <link rel="stylesheet" href="/Public/backend/js/kindeditor/plugins/code/prettify.css" /> <jsp:include page="../layout/script.jsp"></jsp:include> <script type="text/javascript" src="/Public/backend/js/ajaxfileupload.js"></script> <script charset="utf-8" src="/Public/backend/js/kindeditor/kindeditor-all-min.js"></script> <script charset="utf-8" src="/Public/backend/js/kindeditor/lang/zh-CN.js"></script> <script charset="utf-8" src="/Public/backend/js/kindeditor/plugins/code/prettify.js"></script> <c:choose> <c:when test='${inStorage eq 1}'> <c:set var="afterSaveSuccessUrl" value="${pageContext.request.contextPath}/goods/showGoodsInStorage" scope="request" /> </c:when> <c:otherwise> <c:set var="afterSaveSuccessUrl" value="${pageContext.request.contextPath}/goods/showGoodsOnSale" scope="request" /> </c:otherwise> </c:choose> <script type="text/javascript"> $(function() { $("#form").form({ url : "${pageContext.request.contextPath}/systemManage/saveCompany", onSubmit : function() { $.messager.progress({ title : '提示', text : '数据处理中，请稍后....' }); return true; }, success : function(result) { $.messager.progress('close'); result = $.parseJSON(result); if (result.status) { $.messager.show({ title : result.title, msg : result.message, timeout : 1000 * 2 }); setTimeout( function(){ window.location.href="${afterSaveSuccessUrl}"; }, 1000 * 1 ); } else { $.messager.show({ title : result.title, msg : result.message, timeout : 1000 * 5 }); } } }); }); </script> <style> .easyui-textbox { height: 18px; width: 170px; line-height: 16px; /*border-radius: 3px 3px 3px 3px;*/ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; } textarea:focus, input[type="text"]:focus { border-color: rgba(82, 168, 236, 0.8); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6); outline: 0 none; } table { background-color: transparent; border-collapse: collapse; border-spacing: 0; max-width: 100%; } fieldset { border: 0 none; margin: 0; padding: 0; } legend { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #E5E5E5; border-image: none; border-style: none none solid; border-width: 0 0 1px; color: #999999; line-height: 20px; display: block; margin-bottom: 10px; padding: 0; width: 100%; } input, textarea { font-weight: normal; } table, th, td { text-align: left; padding: 6px; } </style> <form id="form" method="post"> <div data-options="fit:true,border:false"> <div data-options="region:'center',border:false" title="" style="overflow: scroll; padding: 10px;"> <fieldset> <legend> <img src="/Public/backend/extend/fromedit.png" style="margin-bottom: -3px;" /> 商家信息 </legend> <input name="companyId" id="companyId" type="hidden" value="${company.companyId }"/> <input name="userId" id="userId" type="hidden" value="${company.userId }"/> <table> <tr> <th>用户名：</th> <td><input name="goodsName" id="goodsName" placeholder="请输入商品名称" class="easyui-textbox easyui-validatebox" type="text" required="required" value="${good.goodsName }" style="width:400px;"/></td> </tr> <tr> <th>密码：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>手机：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>用户QQ：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>用户组：</th> <td> <select id="groupId" name="groupId" class="easyui-combobox" name="groupId" style="width: 171px;" data-options="required:true" > <option value="">请选择用户组</option> <c:forEach var="group" items="${groups}"> <c:choose> <c:when test='${not empty company.groupId and company.groupId eq group.groupId}'> <option value="${group.groupId }" selected="selected">${group.groupName }</option> </c:when> <c:otherwise> <option value="${group.groupId }">${group.groupName }</option> </c:otherwise> </c:choose> </c:forEach> </select> </td> </tr> <tr> <th>状态：</th> <td> <c:choose> <c:when test='${not empty company.status and company.status}'> <input type="radio" name="status" value="1" checked="checked"/>启用 <input type="radio" name="status" value="0"/>禁用 </c:when> <c:when test='${not empty company.status and !company.status}'> <input type="radio" name="status" value="1" />启用 <input type="radio" name="status" value="0" checked="checked"/>禁用 </c:when> <c:otherwise> <input type="radio" name="status" value="1" checked="checked"/>启用 <input type="radio" name="status" value="0" />禁用 </c:otherwise> </c:choose> </td> </tr> <tr> <th>公司名称：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>公司简称：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>办公电话：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>经营范围：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>公司网站：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>公司邮件：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>传真：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>企业QQ：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>公司Logo：</th> <td> <img id="realPic1" src="${company.logo}" /> <input name="realPicFile1" id="realPicFile1" type="file" onchange="ajaxFileUpload('realPicFile1','realPic1','hiddenImgValue1')" style='display: none' /> <input type="hidden" id="hiddenImgValue1" name="logo"/> <input type=button onclick="upImg('realPicFile1')" value="上传" /> </td> </tr> <tr> <th>公司简介：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>公司地址：</th> <td> <select id="s1" name="province" name="groupId" onchange="createCities();"> <option value="">选择省</option> <c:forEach var="pro" items="${provinces}"> <c:choose> <c:when test='${not empty company.province and company.province eq pro.regionId}'> <option value="${pro.regionId }" selected="selected">${pro.regionName }</option> </c:when> <c:otherwise> <option value="${pro.regionId }">${pro.regionName }</option> </c:otherwise> </c:choose> </c:forEach> </select> <div id="cityDiv"> <select id="s2" name="city" name="groupId" onchange="createDistricts();"> <option value="">选择市</option> <c:forEach var="cit" items="${cities}"> <c:choose> <c:when test='${not empty company.city and company.city eq cit.regionId}'> <option value="${cit.regionId }" selected="selected">${cit.regionName }</option> </c:when> <c:otherwise> <option value="${cit.regionId }">${cit.regionName }</option> </c:otherwise> </c:choose> </c:forEach> </select> </div> <div id="areaDiv"> <select id="s3" name="area" name="groupId" > <option value="">选择地区</option> <c:forEach var="are" items="${areas}"> <c:choose> <c:when test='${not empty company.area and company.area eq are.regionId}'> <option value="${are.regionId }" selected="selected">${are.regionName }</option> </c:when> <c:otherwise> <option value="${are.regionId }">${are.regionName }</option> </c:otherwise> </c:choose> </c:forEach> </select> </div> </td> </tr> <tr> <th>职位：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>职位人姓名：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> <tr> <th>职位人电话：</th> <td><input name="keywords" id="keywords" placeholder="请输入关键字" class="easyui-textbox easyui-validatebox" type="text" value="${good.keywords }"/></td> </tr> </table> </fieldset> </div> </div> <div class="dialog-button"> <a href="javascript:submitForm();" class="l-btn"><span class="l-btn-left"><span class="l-btn-text icon-ok l-btn-icon-left">保存</span></span></a> <a href="javascript:history.go(-1);" class="l-btn" id=""><span class="l-btn-left"><span class="l-btn-text icon-cancel l-btn-icon-left">取消</span></span></a> </div> </form> <script> function upImg(fileID) { $("#" + fileID).click(); } function ajaxFileUpload(fileID, imgID, hiddenImgValue) { $.ajaxFileUpload({ url : '${pageContext.request.contextPath}/systemManage/uploadOnePic?inputId=' + fileID, secureuri : false, fileElementId : fileID, dataType : 'json', success : function(data, status) { console.log(data.result); if (!data.status) { alert(data.result); } else { $("#" + imgID).attr("src", data.result); $("#" + hiddenImgValue).val(data.result); } }, error : function(data, status, e) { alert(e); //Error(e); } }); return true; } function submitForm(){ $("#form").submit(); } function createCities(){ var province2=$('#s1').val(); $.ajax({ url:'${pageContext.request.contextPath}/systemManage/getCities', type:'post', dataType:'json', data:{province:province2}, success:createCities2 }); } function createCities2(cities){ var s_root=document.getElementById('s2'); s_root.options.length=0; $('#s2').append("<option value=''>选择市</option>"); for(i=0;i<cities.length;i++){ var city=cities[i]; $('#s2').append("<option value='"+city.regionId+"'>"+city.regionName+"</option>"); } } function createDistricts(){ var city2=$('#s2').val(); $.ajax({ url:'${pageContext.request.contextPath}/systemManage/getDistricts', type:'post', dataType:'json', data:{city:city2}, success:createDistricts2 }); } function createDistricts2(districts){ var s_root=document.getElementById('s3'); s_root.options.length=0; $('#s3').append("<option value=''>选择地区</option>"); for(i=0;i<districts.length;i++){ var district=districts[i]; $('#s3').append("<option value='"+district.regionId+"'>"+district.regionName+"</option>"); } } </script>
2.controller实现
@Controller @RequestMapping("/systemManage") public class SystemManageController { @Resource(name = "systemManageService") private SystemManageService systemManageService; @Resource(name = "fileUploadService") private FileUploadService fileUploadService; @RequestMapping("/getCities") @ResponseBody public List<Region> getCities(@RequestParam("province")Integer provinceId) { return systemManageService.getCities(provinceId); } @RequestMapping("/getDistricts") @ResponseBody public List<Region> getDistricts(@RequestParam("city")Integer cityId) { return systemManageService.getDistricts(cityId); } }
3.Model类
public class Region { private Integer regionId; private Integer parentId; private String regionName; private Integer regionType; private Integer agencyId; public Integer getRegionId() { return regionId; } public void setRegionId(Integer regionId) { this.regionId = regionId; } public Integer getParentId() { return parentId; } public void setParentId(Integer parentId) { this.parentId = parentId; } public String getRegionName() { return regionName; } public void setRegionName(String regionName) { this.regionName = regionName == null ? null : regionName.trim(); } public Integer getRegionType() { return regionType; } public void setRegionType(Integer regionType) { this.regionType = regionType; } public Integer getAgencyId() { return agencyId; } public void setAgencyId(Integer agencyId) { this.agencyId = agencyId; } }
