直接上代码
<!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>
>
</div>
</div>
<div class="mdui-col">
<div class="infotext">
<select name="id" id="typeOne" class="face-select"><option value="" selected="">---</option></select>
>
</div>
</div>
<div class="mdui-col">
<div class="infotext">
<select name="id" id="typeTwo" class="face-select"><option value="" selected="">---</option></select>
>
</div>
</div>
<div class="mdui-col">
<div class="infotext">
<select name="id" id="typeThree" class="face-select"><option value="" selected="">---</option></select>
>
</div>
</div>
<div class="mdui-col">
<div class="infotext">
<select name="id" id="typeFour" class="face-select"><option value="" selected="">---</option></select>
>
</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);
});
}
}
);
});
});
![PyTorch][chapter 12][李宏毅深度学习][Semi-supervised Linear Methods-1]](https://img-blog.csdnimg.cn/direct/c0f2d39aaac24825a7d136038020cc03.png)
