使用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渲染才能使用。