A treasure in the East and firm orders for a time, fill out the shipping address will be updated in real time. Many do not say the code.
FIG effects:
1. The table structure and thinking parsed
Table data is a three-tier data show, pid is the identity of each stratum
example: I have to find a Chinese provincial contains
That is when I changed at every level to load the current class pid on ok
select * from gf_cityaddress where pid=0;
2. code logic
1. The front-end code:
<%@ 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>
Control layer:
@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 logic layer
@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 query:
<select id="selectByPid" resultMap="BaseResultMap" parameterType="com.test.bean.GfCityaddressExample">
select * from gf_cityaddress where pid=#{pid}
</select>
3. renderings
Summary:
page load when the first list is loaded pid = 0 provinces, the provinces when you click on the time change of control js taken out id provinces and then go downtown pid loaded with the current provinces that is below the current provinces, then when taken out of urban change id to the city loaded with the current pid urban areas, the entire logic is the way you can look at the flow chart drawn.
This is a summary of my sql national address, not the latest but may use a self-test
Link: https: //pan.baidu.com/s/1L_s8Grcgr843VAO4SeATnA
extraction code: 6zrl
