在某宝和某东确定订单的时候，收货地址填写会实时更新。多的不说上代码。
效果图:
1.表结构和思路解析
表数据就是一个三级的数据展示，pid就是每个分层的标识
比如:我要查询一级的包含了中国的省级
也就是在我改变每个阶层的时候去加载当前阶层的pid就ok
select * from gf_cityaddress where pid=0;
2.代码逻辑
1.前端代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path=request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/index_work.css"/>
<script type="text/javascript" src="<%=path%>/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var provinceName="";
var cityName="";
var countryName="";
$.ajax({
url:"/showCity",
type:"post",
data:{pid:0},
success:function(obj){
for(var i in obj){
$("#province").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>");
}
},
dataType:"json"
});
$("#province").change(function(){
//清空缓存
$("#city option:not(:first)").remove();
var cityValue=$("#province option:selected").val();
$.ajax({
url:"/showCity",
type:"post",
data:{pid:cityValue},
success:function(obj){
for(var i in obj){
$("#city").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>");
}
},
dataType:"json"
})
});
$("#city").change(function(){
//清理缓存
$("#country").empty();
var cityPid= $("#city option:selected").val();
$.ajax({
url:"/showCity",
data:{pid:cityPid},
type:"post",
success:function(obj){
for(var i in obj){
$("#country").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>");
}
},
dataType:"json"
})
});
$("#country").change(function(){
var countryId=$("#country option:selected").val();
countryName=$("#country option:selected").text();
if(countryId!=-1){
$("#address").val(provinceName+cityName+countryName);
}else{
$("#address").val(provinceName);
}
})
})
</script>
</head>
<body>
<input type="text" id="address">
<select id="province">
<option value="-1">---请选择---</option>
</select>
<select id="city">
<option value="-1">---请选择---</option>
</select>
<select id="country">
<option value="-1">---请选择---</option>
</select>
</body>
</html>
控制层:
@Autowired
private cityService service;
@RequestMapping("/")
public String index() {
return "index";
}
@RequestMapping("/showCity")
@ResponseBody
public Object showCity(String pid) {
List<GfCityaddress> showCityByPid = service.showCityByPid(pid);
System.out.println("-------:" + showCityByPid);
return showCityByPid;
}
Service逻辑层
@Autowired
private GfCityaddressMapper gfcityMapper;
public List<GfCityaddress> showCityByPid(String pid) {
System.out.println("pid:" + pid);
GfCityaddressExample example = new GfCityaddressExample();
example.createCriteria().andPidEqualTo(Integer.valueOf(pid));
List<GfCityaddress> selectByExample = gfcityMapper.selectByExample(example);
return selectByExample;
}
sql查询：
<select id="selectByPid" resultMap="BaseResultMap" parameterType="com.test.bean.GfCityaddressExample">
select * from gf_cityaddress where pid=#{pid}
</select>
3.效果图
总结:
页面加载的时候先加载pid=0的也就是省份的列表，你点击省份的时候js控制改变的时候取出来省份的id然后去加载有当前省份的pid也就是当前省份下边的市区，然后市区改变的时候取出来市区的id去加载有当前市区的pid，整个逻辑就是这样，可以看一下画的流程图。
这是我汇总的全国地址的一个sql，不是最新但是可以自测试使用
链接：https://pan.baidu.com/s/1L_s8Grcgr843VAO4SeATnA
提取码：6zrl