首先注意這裡

如果說一級選單不選中的話 後邊的二級選單是沒有資料的

這裡就要用到三級聯動

第一步：先把一級選單的資料查詢展示出來 所以 pid 預設等於 0

程式碼例項：

前端程式碼：

注意標紅的自定義屬性，後邊會用到

接下來就要用到 js 了 程式碼示例：

$(function () {
    //產品分類三級聯動
    $("#cate_one").change(function () {
        var pid = $(this).val();
        $.ajax({
            url:$("#cate_one").attr('data-url'),
            type:'post',
            data:{pid:pid},
            dataType:'json',
            success:function (res) {
                if (res.code != 200){
                    alert(res.msg);return
                }
                var str = '<option value="">請選擇二級選單</option>'
                $.each(res.data,function (k,v) {
                    str += '<option value="'+v.id+'">'+v.cate_name+'</option>'
                });
                $("#cate_two").html(str)
            }
        })
    })
    $("#cate_two").change(function () {
        var cate_name = $(this).val();
        $.ajax({
            url:$("#cate_one").attr('data-url'),
            type:'post',
            data:{cate_name:cate_name},
            dataType:'json',
            success:function (res) {
                if (res.code != 200){
                    alert(res.msg);return
                }
                var str = '<option value="">請選擇三級選單</option>'
                $.each(res.data,function (k,v) {
                    str += '<option value="'+v.id+'">'+v.cate_name+'</option>'
                });
                $("#cate_three").html(str);
            }
        })
    })
})