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

后台控制器:运用了模型注入直接查询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>")
                })
            }
        })
    })})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值