直接上代码,仅供交流学习,有不足之处欢迎指出。
给所有相关的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)
})
}
)
})