三级联动 地图使用数据

html

<div class="container">
    <table class="table">
        <select class="sel" name="id_en"><option value="" class="first">一级分类</option></select>
        <select class="sel" name="id_on"><option value="" class="first">二级分类</option></select>
        <select class="sel" name="id_in"><option value="" class="first">三级分类</option></select>
    </table>
</div>

 js

$(function () {
    ajaxSel();
    $('.sel').change(function () {
        var pid=$(this).val();
        var _this=$(this);
        ajaxSel(pid,_this);
    })
    function ajaxSel(pid=0,_this='') {
        $.ajax({
            url:"sel",
            data:{pid:pid},
            type:'get',
            dataType:'json',
            success:function (res) {
                console.log(res);
                var e=res.data;
                var content='';
                $(e).each(function (i) {
                    content+="<option value='"+e[i].id+"'>"+e[i].name+"</option>";
                })
                //判断要追加的位置
                if(pid){
                    _this.next('select').find('option:not(.first)').remove();
                    _this.next().append(content);
                }else{
                    $('select:first').append(content)
                }
            }
        })
    }
})

 后台代码

public function sel(Request $request){
    //获取上级分类id
    $id=$request['pid'];
    //查询分类信息
    $date= city::sel($id)->Toarray();
    //返回json格式数据
    return json_encode(['code'=>200,'msg'=>'请求成功','data'=>$date]);
}