商城項目 商品三級下拉框 篩選

//模板代碼//

<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;
    }