Dragon-v

PHP TP5 分类数据三级联动

1.前段代码

<form action="">
    <select name="pid" id="one" class="form-control">
        <option value="">---请选择一级分类---</option>
        {volist name="data" id="vo"}
            <option value="{$vo.id}">{$vo.cate_name}</option>
        {/volist}
    </select>
    <select name="" id="two" class="form-control">
        <option value="">---请选择二级分类---</option>
    </select>
    <select name="" id="three" class="form-control">
        <option value="">---请选择三级分类---</option>
    </select>
</form>
<script>
    //根据ID给一个页面改变事件
    $('#one').change(function () {
        //获取一级分类的pid
        var pid=$(this).val();
        //请求数据
        $.post('refer',{pid:pid},function (res) {
            if (res.code==0){
                //拼接数据并渲染到页面
                var str='<option value="">---请选择二级分类---</option>';
                $.each(res.data,function (k,v) {
                    str+='<option value='+v.id+'>'+v.cate_name+'</option>'
                })
                $('#two').html(str);
            }
        },'json')
    })
    $('#two').change(function () {
        var pid=$(this).val();
        $.post('refer',{pid:pid},function (res) {
            console.log(res)
            if (res.code==0){
                var str='<option value="">---请选择三级分类---</option>';
                $.each(res.data,function (k,v) {
                    str+='<option value='+'v.id'+'>'+v.cate_name+'</option>'
                })
                $('#three').html(str);
            }
        },'json')
    })
</script>
2.后台代码
public function show(){
    $model=new Tpshop_category();
    $data=$model->where('pid',0)->select();
    //将一级分类数据先行返回到页面
    return view('./show',compact('data'));
}
public function refer(){
  //获取前台传来的pid
    $pid=Request::instance()->param('pid');
    $model=new Tpshop_category();
    //根据pid获取数据
    $data=$model->where('pid',$pid)->select();
    return ['code'=>0,'data'=>$data,'msg'=>''];
}

 

posted on 2021-08-12 10:57  Dragon-v  阅读(233)  评论(0编辑  收藏  举报