Ajax实现级联

秒速五厘米 2022-03-26 02:40 225阅读 0赞

级联代码：

//一级下拉框
            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) {
                        }
                    })
                }
            });

页面显示效果：

![20190115105616997.jpg][]

[20190115105616997.jpg]: /images/20220326/ea1bd8ad0166423398fa4ae01b84cb78.png