layui二级联动

简介: layui二级联动
 <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>
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');
         }
      });
});

注意:

1.清除jquery追加的内容用empty方法 。

2.追加完option后需要使用render渲染才能使用。

3.在需要监听的select中添加layfilter属性


相关文章
|
数据库 数据安全/隐私保护
LayUI之树形菜单的实现
LayUI之树形菜单的实现
100 0
|
前端开发 Java 开发者
LayUI系列(二)之树形菜单的实现
LayUI系列(二)之树形菜单的实现
|
JSON Java 数据库
LayUI之动态树实现
LayUI之动态树实现
51 0
|
前端开发 JavaScript 数据安全/隐私保护
Layui之动态树(树形菜单)详解1
Layui之动态树(树形菜单)详解1
394 0
|
前端开发 数据格式
layui_02动态树
layui_02动态树
67 0
|
前端开发 数据可视化 JavaScript
Layui实现树形菜单(超详细)
Layui实现树形菜单(超详细)
189 0
|
前端开发 Java 开发者
LayUI之树形菜单
LayUI之树形菜单
77 0
|
前端开发 Java 数据库
LayUI之动态树
LayUI之动态树
55 0
|
JSON 前端开发 JavaScript
Layui动态树详解
Layui动态树详解
81 0
|
XML 前端开发 数据库
Layui之动态树(树形菜单)详解2
Layui之动态树(树形菜单)详解2
86 0