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

直接上代码

<!-- 
 选项1 选项2 选项3
 > 
 --> 产品分类---微波炉烤箱3L > --- > --- >--- >--- > <!-- 左侧选项 >>> 

右侧选项  -->$(document).ready(function() { // 初始化左边选项列表 var leftOptions = ["Option 1", "Option 2", "Option 3"]; $("#leftSelect").append($("").text("None")); $.each(leftOptions, function(index, value){$("#leftSelect").append($("").attr('value', index+1).text(value)); });// 点击“>>”按钮将左边选中的选项移动到右边 $(".moveRightBtn").click(function(){$('#leftSelect option:selected').remove().appendTo('#rightSelect'); });});$(document).ready(function () {$('#typeZero').change(function () {// $('#typeZero').click(function () {// 在这里编写点击事件的处理逻辑console.log('下拉框被点击了');// 获取当前选中的值var typeZero = $(this).val();console.log('当前选中的值是：' + typeZero);var res = [{"id":"1","name":"2"},{"id":"zhangsan","name":"lisi"}]// 清空原有的下拉框内容$('#typeOne').empty();// 动态生成option元素并添加到下拉框中// for (let i = 0; i < res.length; i++) {// debugger// var option = $('---');// // option.text( res.length[i].name); // 设置每个option的显示文本// option.val( res.length[i].id); // 设置每个option对应的值（如果有）// $('#typeOne').append(option);// }//// $.each(res, function(i) {// // debugger// console.log(res[i]);// console.log(res[i].name);//console.log(res[i].id);// }); // $('#typeZero').empty();//正确的$('#typeOne').empty();$.each(res, function(i) {var option = $('---');option.text(res[i].name); // 设置每个option的显示文本// option.val(res.[i].id); // 设置每个option对应的值（如果有）option.val(res[i].id); $('#typeOne').append(option);}); // $('#typeOne').empty();// var option = $('---');// var option1 = $('---');// $.each(res, function(i) {// option1.text(res[i].name); // 设置每个option的显示文本// // option.val(res.[i].id); // 设置每个option对应的值（如果有）// option1.val(res[i].id); // option+=option1;// }); // $('#typeOne').append(option1);// res.forEach(function (val) {// debugger// console.log(val)// }); });});

具体代码

$(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);});}});});});