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

<%@ 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>

@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);
}
}

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