商城项目 商品三级下拉框 筛选

//模板代码//

<div class="form-group">
    <label>所属分类</label>
    <div>
        顶级分类
        <select class="form-control col-sm-3 firstcate" name="cid[]" style="display: inline-block;">
            <option value="">请选择顶级分类</option>
            @foreach($topCategory as $v)
                <option value="{{$v['id']}}">{{$v['cname']}}</option>
            @endforeach
        </select>
        二级分类
        <select class="form-control col-sm-3 secondcate" name="cid[]" style="display: inline-block;">
            <option value="">请选择二级分类</option>
        </select>
        三级分类
        <select class="form-control col-sm-3 threecate" name="cid[]" style="display: inline-block;">
            <option value="">请选择三级分类</option>
        </select>
    </div>
</div>
<div class="form-group spshuxing" style="display: none;">
    <label>商品属性</label>
    <div class="col-12 col-sm-8 col-lg-12 form-check mt-2 shuxing">
        <label class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input"><span class="custom-control-label">Option 3</span>
        </label>
    </div>
</div>

//模板js部分//

<script>
    //点击顶级分类获取二级分类
    $('.firstcate').change(function () {
        //每次点击顶级分类的时候,将二级分类下拉列表清空
        $('.secondcate').html('<option value="">请选择二级分类</option>');
        //获取当前点击的顶级分类id
        var id = $(this).val();
        //获取当前选择的顶级分类的子分类
        axios.get("http://whd.hd/qiantai/getSonCategory/" + id).then((res) => {
            console.log(res);
            //将获取的子分类数据加入到二级分类里面
            var html = '';
            $.each(res.data, function (k, v) {
                html += '<option value="' + v.id + '">' + v.cname + '</option>';
            })
            $('.secondcate').append(html);
        })
    })
    // 点击二级分类获取三级分类
    $('.secondcate').change(function () {
        //每次点击二级分类,都将三级分类数据清空
        $('.threecate').html('<option value="">请选择三级分类</option>');
        //获取当前点击的顶级分类id
        var id = $(this).val();
        axios.get("http://whd.hd/qiantai/getSonCategory/" + id).then((res) => {
            //将获取的子分类数据加入到二级分类里面
            var html = '';
            $.each(res.data, function (k, v) {
                html += '<option value="' + v.id + '">' + v.cname + '</option>';
            })
            $('.threecate').append(html);
        })
    })
    //点击三级分类获取对应可用属性
    $('.threecate').change(function () {
        //获取当前点击的顶级分类id
        var id = $(this).val();
        axios.get("http://whd.hd/qiantai/getKeyongAttrs/" + id).then((res) => {
            //将获取的可用属性数据循环出来,追加到可用属性布局中
            if (res.data) {
                //将商品属性布局显示
                $('.spshuxing').show();
                var html = '';
                $.each(res.data, function (k, v) {
                    html += '<label class="custom-control custom-checkbox custom-control-inline"><input type="checkbox" value="' + v.id + '" name="attrs[]" class="custom-control-input"><span class="custom-control-label">' + v.aname + '</span></label>';
                })
                $('.shuxing').append(html);
            }
        })
    })
</script>

//控制器部分//

public function getSonCategory($cid)
    {
//        dd(123);
        //找到对应cid的子类
        $sonCategory = Category::where('pid', $cid)->get();

        return $sonCategory;

    }

    public function getKeyongAttrs($cid)
    {

        //根据cid找到对应的可用属性
        $keyong = CategoryAttr::where('category_id', $cid)->pluck('attr_id');

        $KeyongAttrs = Attr::whereIn('id', $keyong)->get();
//        dd(123);
        return $KeyongAttrs;
    }