0
点赞
收藏
分享

微信扫一扫

laraval三级联动模式动态选择“省市区”

谁知我新 2022-03-11 阅读 49

后台控制器:运用了模型注入直接查询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:根据省份选择城市,根据城市选择县

$(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>")
                })
            }
        })
    })})
举报

相关推荐

0 条评论