Layui监听select下拉框选中事件

使用layui之后，直接用change事件无法监听到，需要使用layui的相关组件。

以下代码是一个简单的假数据的二级联动。

<div class="layui-inline">
 <label class="layui-form-label">报考层次:</label>
	<div class="layui-input-inline layui-form">
		<select name="student_Level"  lay-verify="required"  lay-filter="college" class="select">
		 <option value=""></option>
		 <option >专本套读</option>
		 <option >双学位</option>
	    </select>
    </div>
 </div>
 <div class="layui-form-item">
	<div class="layui-inline">
	<label class="layui-form-label">报考专业:</label>
		<div class="layui-input-inline">
			<select name="student_Major" lay-verify="required" >
			</select>
</div>

这里需要主要注意的问题是，在需要监听的select中添加layfilter属性

js代码如下

layui.use(['element','form'], function(){
    var element = layui.element;
    var form = layui.form;
    var  layer = layui.layer;

 form.on('select(college)', function (data) {
    	   var message=$("select[name=student_Level").val();
    	   
    	   if(message=="双学位"){
    		   var html="<option value=''></option><option>教育学</option><option>管理学</option>";
    		   $("select[name=student_Major]").empty();
    		   $("select[name=student_Major]").append(html);
               form.render('select');
    	   }else if(message=="专本套读"){
    		   var html1="<option value=''></option><option>学前教育</option><option>护理学</option><option>英语</option><option>工程管理</option><option>计算机科学与技术</option><option>旅游管理</option><option>财务管理</option><option>环境设计</option><option>市场营销</option><option>动画</option>";
    		   $("select[name=student_Major]").empty();
    		   $("select[name=student_Major]").append(html1);
               form.render('select');
    	   }
    	});
});

这里需要注意两点，第一、清除jquery追加的内容用empty方法 。第二、追加完option后需要使用render渲染才能使用。