后台控制器:运用了模型注入直接查询city表
public function companyAddShow(City $city, Request $request)
{
if ($request->ajax()) {
$data = $city->where('pid', $request->get('id'))->get();
return $data;
}
// 查询pid为0的省份信息
$city = $city->where('pid', 0)->get();
// dd($data);
$type = TypeModel::showData();
$level = LevelModel::showData();
return view("index/admin-add", compact('type', 'level', 'city'));
}
前端:三级联动
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>企业地址:</label>
<div class="formControls col-xs-8 col-sm-9">
<select name="province" id="province">
<option value="">请选择省份</option>
@foreach($city as $val)
<option value="{{$val->id}}">{{$val->name}}</option>
@endforeach
</select>
<select name="city" id="city">
<option value="">------请选择城市------</option>
</select>
<select name="county" id="county">
<option value="">------请选择县------</option>
</select>
</div>
</div>
js:根据省份选择城市,根据城市选择县
$('#province,#city').change(function (){
let id=$(this).val();
let _this=$(this);
$.ajax({
method:'get',
url:"{{url('fang/fangAddShow')}}",
data:{
id:id
},
success:function (e){
_this.nextAll('select').find('option').not(':first-child').remove();
e.map(function (res){
_this.next('select').append("<option value='"+res.id+"'>"+res.name+"</option>")
})
}
})
})
$(function(){
// 省份
$("#province").change(function (){
let id=$(this).val();
// 发ajax请求
$.ajax({
type:'get',
url:"{{url('companyAddShow')}}",
data:{id:id},
success:function (e){
// console.log(e);
$('#city option').not(':first-child').remove();
$('#county option').not(':first-child').remove();
$(e).each(function (key,item){
$("#city").append("<option value='"+item.id+"'>"+item.name+"</option>")
})
}
})
})
// 城市
$("#city").change(function (){
let id=$(this).val();
// 发ajax请求
$.ajax({
type:'get',
url:"{{url('companyAddShow')}}",
data:{id:id},
success:function (e){
// console.log(e);
$('#county option').not(':first-child').remove();
$(e).each(function (key,item){
$("#county").append("<option value='"+item.id+"'>"+item.name+"</option>")
})
}
})
})})