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

直接上代码

复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1233</title>
	</head>
	<body>
		<div>
			<!-- <table>
				  <tr>
				  <td>
					<div class="mdui-col">
						<input>
						<select id="mySelect">
						   <option value="option1">选项1</option>
						   <option value="option2">选项2</option>
						   <option value="option3">选项3</option>
						</select>
					</div>
					</td>
					
					<td>
					 >   
					</td>
					
					<td>
					<div class="mdui-col">
					<input>
					</div>
					</td>
					</tr>		
			</table> -->
			
			
			   <div class="mdui-row-xs-5">
									<div class="mdui-col">
			                                <div class="label">产品分类</div>
			                                <div class="infotext">
			                                    <select name="id" id="typeZero" class="face-select"><option value="" selected="">---</option>
			                                        <option value="1">微波炉</option><option value="2">烤箱</option><option value="3">3L</option></select>
			                                 &gt;
											</div>
											
											</div>
											
											<div class="mdui-col">
			                               
			                                <div class="infotext">
			                                    <select name="id" id="typeOne" class="face-select"><option value="" selected="">---</option></select>
												 &gt;
			                                </div>
											</div>
											
											<div class="mdui-col">
			                               
			                                <div class="infotext">
			                                    <select name="id" id="typeTwo" class="face-select"><option value="" selected="">---</option></select>
												 &gt;
			                                </div>
											</div>
											
											<div class="mdui-col">
			                              
			                                <div class="infotext">
			                                    <select name="id" id="typeThree" class="face-select"><option value="" selected="">---</option></select>
												 &gt;
			                                </div>
											</div>
			                                
											<div class="mdui-col">
											
			                                <div class="infotext">
			                                    <select name="id" id="typeFour" class="face-select"><option value="" selected="">---</option></select>
												 &gt;
			                                </div>
			                            </div>
			</div>
			
		 <!-- <label for="leftSelect">左侧选项</label>
		   <select id="leftSelect" multiple size="5"></select>
		   
		   <button type="button" class="moveRightBtn">>>></button>
		   <br><br>
		   
		   <label for="rightSelect">右侧选项</label>
		   <select id="rightSelect" multiple size="5"></select> -->
		</div>
	</body>
</html>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

$(document).ready(function() {
   // 初始化左边选项列表
   var leftOptions = ["Option 1", "Option 2", "Option 3"];
   $("#leftSelect").append($("<option/>").text("None"));
   $.each(leftOptions, function(index, value){
      $("#leftSelect").append($("<option/>").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>---</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>---</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 = $('<option>---</option>');
				// var option1 = $('<option>---</option>');
				// $.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)
					//             });
					
               
            }
        );
    });


	</script>

具体代码

复制代码

$(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>---</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>---</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>---</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>---</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></option>');
                        option.text(res.TYPE[i].t_name); // 设置每个option的显示文本
                        option.val(res.TYPE[i].id); // 设置每个option对应的值（如果有）
                        $('#typeFour').append(option);
                    });
                }
            }
        );
    });

});

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

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