问题背景

在日常工作中，可能会用到页面 freemaker 以及 layui 前端框架，这个时候直接在 select 上面绑定 onchange 事件往往是不生效的，错误的方式

这种方式给 select 绑定的 onchange 事件是无法触发的， layui 前端框架绑定事件需要使用 lay-filter 属性，就像这样

解决方案

就是像上述通过 lay-filter 的方式绑定select下拉框变动事件，然后在页面内部通过form.on(‘select(getCourseCategoryList)’,function (data) {});来实现具体的业务逻辑

<script>layui.use(['jquery', 'form'], function () {var $ = layui.jquery;var form = layui.form;form.on('select(getCourseCategoryList)',function (data) {//得到select原始DOM对象//console.log(data.elem); //得到select id 属性//console.log(data.elem.id); //得到select name 属性//console.log(data.elem.name); //得到被选中的值//console.log(data.value);//得到美化后的DOM对象 //console.log(data.othis); var courseTypeTwo = data.value;//console.log(courseTypeTwo)$.ajax({url: 'netschoolCourse/getCourseCategoryList',type: 'post',data:{'courseTypeTwo':courseTypeTwo},async :false,dataType: 'json',success: function(data) {var dictDatas = data.dictDatas;//console.log(dictDatas)var $1 = $("#courseCategory");//$1.empty();//console.log($1.html())var html = "<option value=''>--请选择--</option>";$.each(dictDatas,function (index,item) {html += "<option value='"+item.dictValue+"'>"+item.dictLabel+"</option>";});//console.log(html)$1.html(html);form.render('select');}});});});</script>

这里的业务逻辑是为了实现联动查询，当#courseTypeTwo的下拉框变动时异步加载数据并为#courseCategory补充option属性

以实现联动效果。
这里需要注意的是，在#courseCategory的option补充完成之后需要重新渲染一下select下拉框form.render(‘select’);
还有就是除了上述的$1.html(html);给指定的select补充option，还可以通过$1.append(html);来追加补充，但是使用append的话需要开启$1.empty();这样保证每次给#courseCategory追加匹配的option，而不是一直追加，就像这样的错误情况

需要的小伙伴有问题可以评论区留言哈。