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;
}
}
springmvc+jquery实现省市区地址下拉框联动的更多相关文章
- SSM框架，在Html界面利用ajax，json，jQuery实现省市区下拉框联动
1.先生成省市区表格 2.建立实体类 3.在html画出下拉框 <select id="province"> <option value="" ...
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
- Ajax jQuery下拉框联动案例
需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...
- Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份:<下拉框省份> 市区:<下拉框市区> 县乡:<下拉 ...
- html年月日下拉联动菜单 年月日三下拉框联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 月薪10K必备--C#下拉框联动
下拉框联动 很多网站上都用到下拉框联动,就是第一个下拉框没有选择任何项,第二个下拉框就没有选项.这样的做法更加谨慎,更加紧密. 下面我就教大家怎么做下拉框联动: 首先在窗 ...
随机推荐
- git .gitignore 文件不起作用
.gitignore 不起作用的原因是因为 git 有以前文件缓存,只要清理一次缓存即可 git rm -r --cached . // 然后再进行 git git add . git commit
- [net]netcat 做网络端口监听
nc命令说明:https://www.cnblogs.com/nmap/p/6148306.html 如下: nc -vz -w domain/ip &> /dev/null & ...
- 一场由SD卡引发的灾难_转
注:此文章转自“https://user.qzone.qq.com/63915185/blog/1512562541”. Flash里面的数据在使用过程中莫名改变或不翼而飞?程序丢失可能无法正 ...
- CPP_异常处理
错误处理:C分散的就近处理:C++集中处理. C++错误处理机制:函数实现中若出现错误想处理,用throw抛出异常.应用程序中,用try...catch...捕获异常处理. 异常按类型捕获:int, ...
- linux下nc的使用
发送端:cat test.txt | nc -l -p 6666或者nc -l -p 6666 < test.txt 有些版本不要在 -p[监听6666端 ...
- 微信怎样做SEO
微信也能做SEO.大家还不知道吧?今天上海SEO优化公司就和大家解说在微信上要怎么做SEO优化. 微信也有SEO?你会不会觉得我是说笑呢.事实上还就是.我也找不到什么好名词来介绍公众号上的排名,就用微 ...
- ASP.NET Core 2.0使用Log4net实现记录日志功能
一.安装Log4net 1.使用Nuget包进行安装 在依赖项上面右键,选择“管理NuGet程序包”,如下图所示: 在浏览界面输入log4net,然后点击安装,如下图所示: 2.使用程序包管理器控制台 ...
- Android开发-httpclient兼容性问题
据说android 6.0之后已经将Apache Http Client移出SDK,build时出现“Unable to find optional library: org.apache.http. ...
- HBase启动后发现HMaster进程消失了
HMaster没起来很多原因,这次看日志是这个.详细请看:http://www.bkjia.com/yjs/982064.html Hbase:namespace异常处理,hbase异常处理 Hbas ...
- 完全图解RNN、RNN变体、Seq2Seq、Attention机制
完全图解RNN.RNN变体.Seq2Seq.Attention机制 本文主要是利用图片的形式,详细地介绍了经典的RNN.RNN几个重要变体,以及Seq2Seq模型.Attention机制.希望这篇文章 ...