Ajax实现级联

级联代码：

//一级下拉框
        var categoryLevel1 = $("#categoryLevel1"); //拿到一级下拉框元素
        categoryLevel1.append("<option>请选择</option>")
        $.ajax({
            type: "GET",//请求类型
            url: "QueryAppCategory",//请求的url
            dataType: "json",//ajax接口（请求url）返回的数据类型
            success: function (data) {
                if (data != null) {
                    for (var i = 0; i < data.length; i++) { //将值填充到下拉框
                        categoryLevel1.append('<option value="' + data[i].id + '">' + data[i].categoryName + '</option>')
                    }
                }
            }
        });

        //二级下拉框
        $("#categoryLevel1").change(function () { //当一级下拉框改变时
            $("#categoryLevel2").find("option").remove(); //把二级下拉框原来的值先清除
            var cid = $("#categoryLevel1").val();//拿到一级下拉框值
            var categoryLevel2 = $("#categoryLevel2");//拿到二级下拉框元素
            categoryLevel2.append("<option>请选择</option>")
            if (cid != null) {
                $.ajax({
                    type: "GET",//请求类型
                    url: "QueryAppCategory23",//请求的url
                    data: {id: cid},//请求参数
                    dataType: "json",//ajax接口（请求url）返回的数据类型
                    success: function (data) {//data：返回数据（json对象）
                        if (data != null) {
                            for (var i = 0; i < data.length; i++) {//将值填充到下拉框
                                $(categoryLevel2).append('<option value="' + +data[i].id + '">' + data[i].categoryName + '</option>')
                            }
                        }
                    },
                    error: function (data) {
                    }
                })
            }
        });

        //三级下拉框
        $("#categoryLevel2").change(function () { //当二级下拉框改变时
            $("#categoryLevel3").find("option").remove(); //把三级下拉框原来的值先清除
            var cid = $("#categoryLevel2").val();//拿到二级下拉框值
            var categoryLevel3 = $("#categoryLevel3");//拿到三级下拉框元素
            if (cid != null) {
                $.ajax({
                    type: "GET",//请求类型
                    url: "QueryAppCategory23",//请求的url
                    data: {id: cid},//请求参数
                    dataType: "json",//ajax接口（请求url）返回的数据类型
                    success: function (data) {//data：返回数据（json对象）
                        if (data != null) {
                            for (var i = 0; i < data.length; i++) {//将值填充到下拉框
                                $(categoryLevel3).append('<option value="' + +data[i].id + '">' + data[i].categoryName + '</option>')
                            }
                        }
                    },
                    error: function (data) {
                    }
                })
            }
        });

页面显示效果：