1.jsp代码
前端传参格式:(type,codeId)
type:三种类型(“province” || “city” || “area”)
codeId:为选择省的时后自动传入.
后台返回JSON数据格式:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>我的测试</title>
</head>
<body>
<div style="width: 350px;height: 100px;border: 1px solid orangered">
<select id="selProvince">
<option value="">--请选择省--</option>
</select>
<select id="selCity">
<option value="">--请选择市--</option>
</select>
<select id="selArea">
<option>--请选择区/县--</option>
</select>
<p><input type="text" id="addr" style="background-color: whitesmoke" readonly></p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
getProvince('0',"province");
$("#selProvince").on("change",function () {
var pid=$("#selProvince").val();
getProvince(pid,"city");
$("#selArea").empty();
$("#selArea").append('<option value="" selected>--请选择区/县--</option>');
});
$("#selCity").on("change",function () {
var pid=$("#selCity").val();
getProvince(pid,"area");
});
$("#selArea").on("change",function () {
var province=$("#selProvince").val();
var city=$("#selCity").val();
var area=$("#selArea").val();
$("#addr").val(province+","+city+","+area);
})
});
function getProvince(codeId,type) {
$.ajax({
url:"getProCityTown",
type:"post",
dataType:"json",
data:{"codeId":codeId,"type":type},
success:function(data){
var content="";
if(type == 'province'){
$("#selProvince").empty();
}else if(type == 'city'){
$("#selCity").empty();
}else if(type == 'area'){
$("#selArea").empty();
}
var data=data.page.list;
for(var i=0;i<data.length;i++){
if(i == 0 && type == 'province'){
content+='<option value="" disabled>--请选择省--</option>';
}else if(i == 0 && type == 'city'){
content+='<option value="" >--请选择市--</option>';
}else if(i == 0 && type == 'area'){
content+='<option value="" disabled>--请选择区/县--</option>';
}
content+='<option value="'+data[i].id+'">'+data[i].title+'</option>';
}
if(type == 'province'){
$("#selProvince").append(content);
}else if(type == 'city'){
$("#selCity").append(content);
}else if(type == 'area'){
$("#selArea").append(content);
}
},
error:function (data) {
alert(data.msg);
}
});
}
</script>
</body>
</html>
2.显示效果

3.后台获取省市县的code值,查询数据库得到地址
SELECT province.title,province.id from province where province.id=(SELECT SUBSTRING_INDEX("12,191,2185",',',1) as 'pid')
UNION ALL
SELECT city.title ,city.id from city where city.id= (SELECT SUBSTRING_INDEX(substring("12,191,2185",1,6),',',-1) as 'pid')
UNION ALL
SELECT county.title, county.id from county where county.id=(SELECT SUBSTRING_INDEX("12,191,2185",',',-1) as 'pid')