三级联动
Posted z242643
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三级联动相关的知识，希望对你有一定的参考价值。
视图文件
<body>
<form action="" method="post">
<select name="" id="pro">
<option value="0">请选择省</option>
@foreach($list as $val)
<option value="{{$val->provinceid}}">{{$val->province}}</option>
@endforeach
</select>
<select name="" id="city">
<option value="0">请选择市</option>
</select>
<select name="" id="area">
<option value="0">请选择区</option>
</select>
</form>
</body>
<script src="/js/jquery-3.4.1.js"></script>
<script>
$.ajaxSetup({
headers: { //关闭csrf验证
‘X-CSRF-TOKEN‘: $(‘meta[name="csrf-token"]‘).attr(‘content‘)
}
});
$(‘#pro‘).change(function(){
var va =$(this).val();
// alert(va);
$.ajax({
url:‘/getcity‘,
data:{pid:va},
datatype:‘json‘,
type:‘post‘,
success:function(res){
var htm=‘<option value="0">请选择市</option>‘;
if(res.code==1){
for(i=0;i<res.list.length;i++){
htm+=‘<option value="‘+res.list[i].cityid+‘">‘+res.list[i].city+‘</option>‘;
}
}
$(‘#city‘).html(htm);
$(‘#area‘).html(‘<option value="0">请选择区</option>‘); //重新选择省时刷新区选择框
}
});
});
$(‘#city‘).change(function(){
var va =$(this).val();
// alert(va);
$.ajax({
url:‘/getarea‘,
data:{pid:va},
datatype:‘json‘,
type:‘post‘,
success:function(res){
var htm=‘<option value="0">请选择区</option>‘;
if(res.code==1){
for(i=0;i<res.list.length;i++){
htm+=‘<option value="‘+res.list[i].areaid+‘">‘+res.list[i].area+‘</option>‘;
}
}
$(‘#area‘).html(htm);
}
});
});
</script>
控制器
public function getcity(Request $request){
if($request->isMethod(‘post‘)){
$pid=$request->input(‘pid‘);
$list=DB::table(‘city‘)->where(‘fatherid‘,$pid)->get();
$arr=[];
if($list){
$arr[‘list‘]=$list;
$arr[‘code‘]=1;
}else{
$arr[‘code‘]=2;
}
return response()->json($arr);
}
}
public function getarea(Request $request){
if($request->isMethod(‘post‘)){
$pid=$request->input(‘pid‘);
$list=DB::table(‘area‘)->where(‘fatherid‘,$pid)->get();
$arr=[];
if($list){
$arr[‘list‘]=$list;
$arr[‘code‘]=1;
}else{
$arr[‘code‘]=2;
}
return response()->json($arr);
}
}
以上是关于三级联动的主要内容，如果未能解决你的问题，请参考以下文章