页面中用layui插件造成select的onchange事件不起作用问题解决办法

最新推荐文章于 2024-11-19 14:48:13 发布

原创最新推荐文章于 2024-11-19 14:48:13 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#select #layui

layui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用layui框架动态加载HTML下拉列表的方法。通过监听select元素的变化，当特定选项被选择时，会触发新的数据加载并更新另一个select元素的内容。这种方式常用于级联选择场景，例如根据科目选择对应的年级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data.elem：得到select原始DOM对象
data.value：得到被选中的值
data.elem.id：得到select原始DOM对象的id

<script>
	listSelects('${contextPath}/public/list_subject','subject'); //加载科目列表	
	layui.use(['form', 'jquery'], function(){
		var form = layui.form;
		form.on('select', function(data){
			var selectid = data.elem.id;
			if(selectid == "subjectid"){//根据科目动态加载年级列表
				var subjectid = data.value;
				listSelects('${contextPath}/public/list_grade?subjectid='+subjectid,'grade'); 
				form.render();
			}
		});
	});
</script>