thinkphp + jquery 实现三级联动

以下是后台代码：

public function create(){
        //查询商品分类数据，用于页面下拉列表展示
        $category = \app\admin\model\Category::where('pid', 0)->select();
        //查询商品类型数据，用于商品属性栏 下拉列表展示
        $type = \app\admin\model\Type::select();
        return view('add', ['category' => $category, 'type' => $type]);
    }

    public function getPid($pid){
        $data = \app\admin\model\Category::where('pid',$pid)->select();
        return json(['code'=>10000,'msg'=>'success','data'=>$data]);
    }

然后是前台表单：

<div class="formControls col-xs-8 col-sm-9">
        <span class="select-box" style="width:150px;">
            <select name="" class="select" size="1" id="cate_one">
                <option value="0">请选择一级分类</option>
                {foreach $category as $v}
                <option value="{$v.id}">{$v.cate_name}</option>
                {/foreach}
            </select>
        </span>
    <span class="select-box" style="width:150px;">
            <select name="" class="select" size="1" id="cate_two">
                <option value="0">请选择二级分类</option>
            </select>
        </span>
    <span class="select-box" style="width:150px;">
            <select name="cate_id" class="select" size="1" id="cate_three">
                <option value="0">请选择三级分类</option>
            </select>
        </span>
    </div>

最后是核心jquery部分：

<script>
    $('#cate_one').change(function () {
        var pid = $(this).val();
        $.ajax({
            'url':'{:url("getPid")}',
            'type':'post',
            'data':{'pid':pid},
            'dataType':'json',
            'success':function (res) {
                if (res.code != 10000){
                    alert(res.msg);return;
                }
                var str = '<option value="">请选择二级分类</option>';
                $.each(res.data,function (i,v) {
                    str += '<option value="' + v.id +'">' + v.cate_name + '</option>';
                })
                $('#cate_two').html(str);
            }
        })
    })

    $('#cate_two').change(function () {
        var pid = $(this).val();
        $.ajax({
            'url':'{:url("getPid")}',
            'type':'post',
            'data':{'pid':pid},
            'dataType':'json',
            'success':function (res) {
                if (res.code != 10000){
                    alert(res.msg);return;
                }
                var str = '<option value="">请选择三级分类</option>';
                $.each(res.data,function (i,v) {
                    str += '<option value="' + v.id +'">' + v.cate_name + '</option>';
                })
                $('#cate_three').html(str);
            }
        })
    })
</script>

最后别忘了去引用jquery哦