springmvc+jquery实现省市区地址下拉框联动

时间：2021-02-16 09:47:19

参考资料：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;

    }

}

相关文章