效果图:
HTML代码:
报名区域:
省份:
城市:
区县:
js代码:
/* 省市县三级联动 */
$(function(){
$.ajax({
type:"POST",
cache:false,
url:"/agent/index/areaDate",
data:{"pid":0},
//data:{"tree_path":","},
dataType:"json",
success:function(data){
var option='--请选择--';
//data.date.list.forEach(function(val, index) {
$.each(data.date,function(i,n){
option += ''+n.name+'';
})
$("#pro").append(option);
}
});
//市
$("#pro").change(function(){
var pid=$(this).val();
$.ajax({
type:"POST",
cache:false,
url:"/agent/index/areaDate",
data:{"pid":pid},
dataType:"json",
success:function(data){
//追加本级option前,先清除city和county的option,以免重选时干扰
$("#city option").remove();
$("#county option").remove();
var option='--请选择--';
$.each(data.date,function(i,n){
option += ''+n.name+'';
})
$("#city").append(option);
}
});
});
//区/县
$("#city").change(function(){
var pid=$(this).val();
$.ajax({
type:"POST",
cache:false,
url:"/agent/index/areaDate",
data:{"pid":pid},
dataType:"json",
success:function(data){
//同上
$("#county option").remove();
var option='--请选择--';
$.each(data.date,function(i,n){
option += ''+n.name+'';
})
$("#county").append(option);
}
});
});
})
java代码:
/**
* 加载省市县三级数据
* @param request
* @param model
* @return
* @author: jinchunzhao
* @throws
* @date: 2019年1月21日 上午9:20:54
*/
@ResponseBody
@RequestMapping(value="/areaDate",method=RequestMethod.POST)
public JsonResult areaList(HttpServletRequest request,Model model){
try {
LoginAguser loginAguser = SessionApi.getCurrentAguser(request.getSession());
if (loginAguser == null) {
request.setAttribute(CoinConfig.WEB_TITLE, "登录");
return JsonResult.error("登录信息异常,请重新登录", null);
}
String pid = request.getParameter("pid");
List list = areaService.findByPid(pid);
return JsonResult.success("success", list);
} catch (Exception e) {
logger.error(e.getMessage());
e.printStackTrace();
return JsonResult.error("系统异常,无法访问", null);
}
}
数据库部分数据:
数据库中所有数据:
https://download..net/download/jinchunzhao123/10931730