直接上代码,仅供交流学习,有不足之处欢迎指出。
给所有相关的select标签添加个class="selection"
属性,以下是基于layui写的,获取elem的方法与平常写的jquery不大一样,思路差不多
form.on('select(selection)', function (obj) {
var curr_sel_inx = $('.selection').index(obj.elem) // 获取当前select标签的index,$('.selection')获取所有select标签,是个数组,这里取得当前变化的select标签的index
var next_selection = $('.selection').eq(curr_sel_inx + 1) //获取下一个select标签
next_selection.find('option').not('option:first').remove() // 删除下一个select标签的子元素option
// ajax请求数据,动态生成option
common.ajax(
"{% url 'clean:list_data_schedule' %}",
'get',
'json',
{
action: obj.elem.id,
site_code: $('#site_code').val(),
db_ip: $('#db_ip').val(),
db_name: $('#db_name').val(),
table_owner: $('#table_owner').val(),
table_name: $('#table_name').val(),
work_date: $('#work_date').val()
},
function (res) {
if (res.code === 0) {
var option = ''
for (let index = 0; index < res.data.length; index++) {
// 后端传来的res.key说明:后端传来的是字典,不同select标签传回的键不一样,所以后端传递key
option += '<option value="' + res.data[index][res.key] + '">' + res.data[index][res.key] + '</option>'
}
next_selection.append(option) // 动态修改下一个select标签的option元素
form.render('select') //layui form用法,修改select标签元素后,必须使用此方法重载
return false
}
layer.alert(res.msg, { icon: 2, closeBtn: 0 }, function (index) {
// 获取数据失败后,清空被修改select标签之后的所有select标签,避免保留原有值,
$('.selection').each(function name(inx, elem) {
if (inx > curr_sel_inx) {
$('.selection').eq(inx).find('option').not('option:first').remove()
}
})
form.render('select')
layer.close(index)
})
}
)
})
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库