问题背景
在日常工作中，可能会用到页面freemaker以及layui前端框架，这个时候直接在select上面绑定onchange事件往往是不生效的，错误的方式
这种方式给select绑定的onchange事件是无法触发的，layui前端框架绑定事件需要使用lay-filter属性，就像这样
解决方案
就是像上述通过lay-filter的方式绑定select下拉框变动事件，然后在页面<script></script>内部通过form.on('select(getCourseCategoryList)',function (data) {});来实现具体的业务逻辑
<script>layui.use(['jquery', 'form'], function () { var$=layui.jquery; varform=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); varcourseTypeTwo=data.value; //console.log(courseTypeTwo)$.ajax({ url: 'netschoolCourse/getCourseCategoryList', type: 'post', data:{'courseTypeTwo':courseTypeTwo}, async :false, dataType: 'json', success: function(data) { vardictDatas=data.dictDatas; //console.log(dictDatas)var$1=$("#courseCategory"); //$1.empty();//console.log($1.html())varhtml="<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，而不是一直追加，就像这样的错误情况
需要的小伙伴有问题可以评论区留言哈。
