TP5.0 分类数据三级联动

1.前端有三个下拉框 ，顶级分类的数据要在页面加载事件完成

如图：

 

 

 2.二级分类的数据要在顶级分类改变事件的时候获取，同理三级分类在二级分类改变事件的时候获取

代码如下

<div class="row cl">
      <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品分类：</label>
            <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>

                           <option value="1">分类</option>

                       </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>
  </div>

<script type="text/javascript">
    //页面加载事件 查询顶级分类，商品模型
    $(document).ready(function () {
        $.ajax({
            url:'http://www.item.skill.com/cate?',//后端接口 查询分类
            type:'get',
            dataType:'json',
            success:function (response) {
                console.log(response);
                var str = '<option value="0">请选择分类</option>';
                $.each(response.data, function (i, v) {
                    str += '<option value="' + v.id + '">' + v.cate_name + '</option>';
                });
                $('#cate_one').html(str);
            }
        })
    })
    $(function(){
        $('.HuiTab').Huitab();
        //商品分类
        $('#cate_one').change(function(){
            var pid = $(this).val();
            $.ajax({
                'url':'http://www.item.skill.com/cate?',
                'type':'get',
                'data':{'pid':pid},
                'dataType':'json',
                'success':function(response){
                    if(response.code != 200){
                        alert(response.msg);return;
                    }
                    console.log(response);
                    var str = '<option value="">请选择二级分类</option>';
                    $.each(response.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':'http://www.item.skill.com/cate?',
                'type':'get',
                'data':{'pid':pid},
                'dataType':'json',
                'success':function(response){
                    if(response.code != 200){
                        alert(response.msg);return;
                    }
                    var str = '<option value="">请选择三级分类</option>';
                    $.each(response.data, function(i,v){
                        str += '<option value="' + v.id + '">' + v.cate_name + '</option>';
                    });
                    $('#cate_three').html(str);
                }
            });
        });

后端的查询分类数据 控制器

public function getCate()
    {
        $pid = request()->get('pid') ? request()->get('pid'):0;
        $categoryData = \app\api\model\Category::getAllCate($pid);
        $arr['code'] = 200;
        $arr['msg'] = 'success';
        $arr['data'] = $categoryData;
        return json($arr);
    }

模型

　　//根据pid查询分类
    public static function getAllCate($pid)
    {
        return self::where('pid',$pid)->select();
    }

效果图如下