下拉框联动 类似于请求第一个框之后，携带参数请求后端接口，渲染第二个下来框

直接上代码

	
		
		
	
	
		

			
			
			
			   

									

			                                
产品分类
			                                

			                                    ---
			                                        微波炉烤箱3L
			                                 >
											
											
											
											
											

			                               
			                                

			                                    ---
												 >
			                                
											
											
											

			                               
			                                

			                                    ---
												 >
			                                
											
											
											

			                              
			                                

			                                    ---
												 >
			                                
											
			                                
											

											
			                                

			                                    ---
												 >
			                                
			                            
			
			
		 
		
	

具体代码

$(document).ready(function () {
    $('#typeZero').change(function () {
        // 在这里编写点击事件的处理逻辑
        console.log('下拉框被点击了');
        // 获取当前选中的值
        var typeZero = $(this).val();
        console.log('当前选中的值是：' + typeZero);
        var params = {
            ID: typeZero,
            LEVEL: '1'
        };
        // 根据需要进行其他操作...
        //理解成请求的后端的接口的路径 完事了 （'productManage.ProductType@getType）
        f.doAjaxResult('productManage.ProductType@getType"', params,
            function (res) {
                console.log('请求结果：' + res);
                if (res.TYPE != null && res.TYPE != undefined && res.TYPE != '') {
                    // 清空原有的下拉框内容
                    $('#typeOne').empty();

                    // 动态生成option元素并添加到下拉框中
                    // for (let i = 0; i < res.TYPE.length; i++) {
                    //     var option = $('---');
                    //     option.text(res.TYPE[i].t_name); // 设置每个option的显示文本
                    //     option.val(res.TYPE[i].id); // 设置每个option对应的值（如果有）
                    //     $('#typeOne').append(option);
                    // }

                    $.each(res.TYPE, function(i) {
                        var option = $('---');
                        option.text(res.TYPE[i].t_name); // 设置每个option的显示文本
                        option.val(res.TYPE[i].id); // 设置每个option对应的值（如果有）
                        $('#typeOne').append(option);
                    });

                }
            }
        );
    });


    $('#typeOne').change(function () {
        // 在这里编写点击事件的处理逻辑
        console.log('下拉框被点击了');
        // 获取当前选中的值
        var typeZero = $(this).val();
        console.log('当前选中的值是：' + typeZero);
        var params = {
            ID: typeZero,
            LEVEL: '1'
        };
        // 根据需要进行其他操作...
        f.doAjaxResult('productManage.ProductType@getType"', params,
            function (res) {
                console.log('请求结果：' + res);
                if (res.TYPE != null && res.TYPE != undefined && res.TYPE != '') {
                    // 清空原有的下拉框内容
                    $('#typeTwo').empty();

                    $.each(res.TYPE, function(i) {
                        var option = $('---');
                        option.text(res.TYPE[i].t_name); // 设置每个option的显示文本
                        option.val(res.TYPE[i].id); // 设置每个option对应的值（如果有）
                        $('#typeTwo').append(option);
                    });
                }
            }
        );
    });


    $('#typeTwo').change(function () {
        // 在这里编写点击事件的处理逻辑
        console.log('下拉框被点击了');
        // 获取当前选中的值
        var typeZero = $(this).val();
        console.log('当前选中的值是：' + typeZero);
        var params = {
            ID: typeZero,
            LEVEL: '1'
        };
        // 根据需要进行其他操作...
        f.doAjaxResult('productManage.ProductType@getType"', params,
            function (res) {
                console.log('请求结果：' + res);
                if (res.TYPE != null && res.TYPE != undefined && res.TYPE != '') {
                    // 清空原有的下拉框内容
                    $('#typeThree').empty();

                    $.each(res.TYPE, function(i) {
                        var option = $('---');
                        option.text(res.TYPE[i].t_name); // 设置每个option的显示文本
                        option.val(res.TYPE[i].id); // 设置每个option对应的值（如果有）
                        $('#typeThree').append(option);
                    });
                }
            }
        );
    });

    $('#typeThree').change(function () {
        // 在这里编写点击事件的处理逻辑
        console.log('下拉框被点击了');
        // 获取当前选中的值
        var typeZero = $(this).val();
        console.log('当前选中的值是：' + typeZero);
        var params = {
            ID: typeZero,
            LEVEL: '1'
        };
        // 根据需要进行其他操作...
        f.doAjaxResult('productManage.ProductType@getType"', params,
            function (res) {
                console.log('请求结果：' + res);
                if (res.TYPE != null && res.TYPE != undefined && res.TYPE != '') {
                    // 清空原有的下拉框内容
                    $('#typeFour').empty();
                    $.each(res.TYPE, function(i) {
                        var option = $('');
                        option.text(res.TYPE[i].t_name); // 设置每个option的显示文本
                        option.val(res.TYPE[i].id); // 设置每个option对应的值（如果有）
                        $('#typeFour').append(option);
                    });
                }
            }
        );
    });

});