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="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=" 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;
    }
}