地区的 msql 文件
链接:https://pan.baidu.com/s/1KER5wznJl8qikBP9dX6uUA
提取码:1111
第一步
进行书写 HTML 的 select 效果
//进行书写第一个联动的效果,直接将省份的值查询出来,直接渲染出来,ID为omitTion
<select name="" id="omit">
<option value="">---请选择省---</option>
//这个foreach循环是我已经在模型层找到的省份值,要加上where判断pid为0
@foreach($omit as $val)
<option id="{{ $val->id }}" value="{{ $val->id }}">
{{ $val->name }}
</option>
@endforeach
</select>
// 可以进行参考 $omit = DB::table('city')->where('pid',0)->get();
//书写市的联动,并起ID名为city
<select name="" id="city">
<option value="">---请选择市---</option>
</select>
//书写市的联动,并起ID名为couny
<select name="" id="couny">
<option value="">---请选择县---</option>
</select>
第二步
给省份的联动设置事件,只要已选中别的省份就进行事件的操作
执行 AJAX 来获取市的内容 ( 两个AJAX几乎一样,可以进行合并成为一个事件 )
<script type="text/javascript">
//设置事件操作
$("#omit").change(function ()
{
//获取到省选中的ID值
let id = $(this).val();
//执行 AJAX 操作
$.ajax({
url:'/index.php/Fangattr/maket',
type:'get',
dataType:'json',
data:{
id:id
},
success:function (e)
{
//选中新的内容,将旧值进行删除操作
$("#city option").not(":first-child").remove();
//注意,e.msg 是我json返回值,我把市的值扔到msg中了,不是放在data中
$(e.msg).each(function (key , item){
//将市的内容进行拼接展示出来,一定要写class和id,不然没有办法获取市的ID
$("#city").append("<option id='"+item.id+"' value='"+item.id+"'>"+item.name+"</option>")
})
}
});
});
//和省份的ajax几乎一样,只是id不同罢了
$("#city").change(function ()
{
let id = $(this).val();
$.ajax({
url:'/index.php/Fangattr/bstr',
type:'get',
dataType:'json',
data:{
id:id
},
success:function (e)
{
$("#couny option").not(":first-child").remove();
$(e.msg).each(function (key , item)
{
$("#couny").append("<option value='"+item.id+"'>"+item.name+"</option>")
})
}
});
})
</script>
第三步
进行控制器的书写操作,注意,两个控制器的内容一模一样
public function maket(Request $request)
{
//取得传过来的ID值
$id = $request->all('id');
//将ID值进行pid的判断操作
$showMaket = DB::table('city')->where('pid',$id)->get();
return success($showMaket);
}
public function bstr(Request $request)
{
//取得传过来的ID值
$id = $request->all('id');
//将ID值进行pid的判断操作
$showMaket = DB::table('city')->where('pid',$id)->get();
return success($showMaket);
}