案例代码
<select name="parentSelect" lay-filter="parentSelect">
<option value="">请选择父级选项</option>
<option value="1">父级选项1</option>
<option value="2">父级选项2</option>
<!-- 添加其他父级选项 -->
</select>
<select name="childSelect" lay-filter="childSelect">
<option value="">请选择子级选项</option>
</select>
js部分
layui.use(['form'], function(){
var form = layui.form;
// 监听父级 select 元素的变化事件
form.on('select(parentSelect)', function(data){
var parentId = data.value; // 获取选择的父级选项值
$.ajax({
url: 'ymtypeselect',
type: 'post',
data: {
typeid : parentId
},
success: res => {
var childSelect = $('select[name="childSelect"]'); // 获取子级 select 元素
childSelect.empty(); // 清空子级 select 的选项
if (res.length === 0) {
// 如果子级选项为空,添加一个默认的提示选项
childSelect.append('<option value="">暂无子级选项</option>');
} else {
// 遍历返回的数据数组
res.forEach(option => {
// 创建 option 元素
var optionElement = $('<option></option>').attr('value', option.id).text(option.title);
// 将 option 元素添加到子级 select 中
childSelect.append(optionElement);
});
}
// 渲染 form 组件,使得动态添加的子级选项生效
form.render('select');
}
});
});
});
标签:选项,层级,option,form,父级,Layui,childSelect,Select,select
From: https://www.cnblogs.com/79524795-Tian/p/18129832