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#下拉框联动
下拉框联动 很多网站上都用到下拉框联动,就是第一个下拉框没有选择任何项,第二个下拉框就没有选项.这样的做法更加谨慎,更加紧密. 下面我就教大家怎么做下拉框联动: 首先在窗 ...
随机推荐
- [转].Net连接池超时注意事项
http://blog.csdn.net/jxqvip/article/details/6738551 超时时间已到.超时时间已到,但是尚未从池中获取连接.出现这种情况可能是因为所有池连接均在使用,并 ...
- android开发(28) 做个 指南针 应用
参考网上的资料,做了个指南针应用玩玩. 步骤: 1.获得 SensorManager. mSensorManager = (SensorManager) getSystemService(SENSOR ...
- 微信小程序——video使用总结
关于小程序video的一些基本使用方法,可点击这里稍作了解. 需求: 1.默认显示封面: 2.一个视频播放的时候,其他视频停止播放,并显示封面. 解决问题思路: 1.通过wx:if判断当前视频是否是播 ...
- n个括号对的所有可能情况
所有可能情况的数量为卡特兰数.故求所有可能的出栈情况与此类似. 思路: 若左括号没全插入,则插入左括号: 若已插入左括号数比已插入右括号数多,则插入右括号: #include<stdio.h&g ...
- htop VS top
在 Linux 系统中,top 命令用来显示系统中正在运行的进程的实时状态,它显示了一些非常有用的信息,比如 CPU 利用情况.内存消耗情况,以及每个进程情况等.但是,你知道吗?还有另外一个命令行工具 ...
- 关于Unity中场景的导入与导出(专题九)
Unity场景 场景虽然是由场景美术做好的,但是我们经常需要自己去导导出以及从别的项目导入,所以我们需要对场景的导入和导出有一个详细的了解 1: 场景是由美术人员搭建完成后提交给程序;2: 场景一般包 ...
- 【CUDA学习】结构体指针复制
内核函数中要用data结构作用参数 typedef struct { int* value; int* num; } data; //host端 data* h_input; h_input=(dat ...
- sqlldr 学习总结1
1.建表语法(采用scott中的emp表) create table emp( empno number(4) not null, ename varchar2(10), job ...
- 性能优化系列三：JVM优化
一.几个基本概念 GCRoots对象都有哪些 所有正在运行的线程的栈上的引用变量.所有的全局变量.所有ClassLoader... 1.System Class.2.JNI Local3.JNI Gl ...
- SpringMVC系列（十四）Spring MVC的运行流程
Spring MVC的运行流程图: 1.首先看能不能发送请求到Spring MVC的DispatcherServlet的url-pattern2.如果能发送请求,就看在Spring MVC中是否存在对 ...