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#下拉框联动
下拉框联动 很多网站上都用到下拉框联动,就是第一个下拉框没有选择任何项,第二个下拉框就没有选项.这样的做法更加谨慎,更加紧密. 下面我就教大家怎么做下拉框联动: 首先在窗 ...
随机推荐
- Map 与 JavaBean 的相互装换
目的 为了方便使用 DbUtils,在插入数据时需要传入含有占位符的 SQL 语句和对应占位符的值(数组),封装代码如下: /** * 插入实体 */ public static <T> ...
- C语言 · 简单计算器
算法提高 简单计算器 时间限制:1.0s 内存限制:512.0MB 问题描述 编程模拟计算器的加.减.乘.除功能,根据用户输入的运算符,对两个数进行运算.(要求switch语句) 输 ...
- tensorflow入门 （一)
转载:作者:地球的外星人君链接:https://www.zhihu.com/question/49909565/answer/207609620来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...
- JMeter (1) —— JMeter与WebDriver安装与测试（101 Tutorial）
JMeter (1) -- JMeter与WebDriver安装与测试(101 Tutorial) 主要内容 JMeter安装 WebDriver安装 一个简单的JMeter+WebDriver示例 ...
- 在 Android studio 中 配置Gradle 做到 “根据命令行提示符生成指定versionCode, versionName，指定apk的打包输出路径”
需求: 1. 使用 Android studio ,使用 gradle 进行构建 2. 在实际开发中,我们需要使用jenkins进行打包.就需要配置我们的 gradle 脚本以支持参数化的方式. 3. ...
- linq操作符：串联操作符
串联是一个将两个集合连接在一起的过程.在Linq中,这个过程通过Concat操作符实现.Concat操作符用于连接两个集合,生成一个新的集合.来看看Concat操作符的定义: public stati ...
- Java finally语句是在try或catch的retrurn之前还是之后执行
若try或catch中没有return语句,则按正常执行流,从上到下,finally里的所有修改都生效. 这里讨论的是try或catch里有return或throw语句的情形,此情形比较让人迷惑. 总 ...
- sps和pps的简单理解记录
最近博客写出了日记的既视感... 使用RTP传输H264的时候,需要用到sdp协议描述,其中有两项:Sequence Parameter Sets (SPS) 和Picture Parameter S ...
- R语言-Paste函数
该函数和excel中的&一样,可以将不同类型的数据放在一起. paste(....,sep="",collapse=NULL) ...表示要加在一起的数据类型,e.g p ...
- Apple iOS MDM service 简介
Apple iOS MDM service 簡介 藉由MDM服務,企業可以用來控管配發給員工的iOS Device.可以採用Apple官方推出的工具,也可以採用第三方開發的服務. MDM server ...