C# MVC LayUI实现下拉框二级联动

一、layui.use

1、LayUI的官方使用文档：https://www.layui.com/doc/

2、layui的内置模块不是默认就加载好的，必须要执行启动模块的这种方法后模块才会加载；

3、layui.use就是一种加载模块的方式。
如下代码：

//LayUI渲染以及启动模块
      layui.use(['form', 'layedit', 'laydate'], function () {
                var form = layui.form,//获取form模块
                layer = layui.layer,//获取layer模块
                layedit = layui.layedit,//获取layedit模块
                laydate = layui.laydate,//获取laydate模块
                $ = layui.$;

 二、创建控制器或在已有的控制器中添加在操作方法

　　　　　/// 

        /// 获取部门信息
        /// 
        [HttpPost]
        public JsonResult GetDeplist()
        {
            using (ERPEntities db = new ERPEntities())
            {
                db.Configuration.ProxyCreationEnabled = false;//关闭EF的默认加载
                var Deplist = db.dep.ToList();
                //将数据Json化并传到前台视图
                return Json(new { data = Deplist }, JsonRequestBehavior.AllowGet);
            }
        }

       　 /// 

         /// 通过部门ID来获取角色
         /// 
         /// 部门ID
         /// 
         [HttpPost]
        public JsonResult GetRolelist(int dep_id)
        {
            using (ERPEntities db = new ERPEntities())
            {
                db.Configuration.ProxyCreationEnabled = false;//关闭EF的默认加载
                var Roles = db.role.Where(r => r.dep_id == dep_id).ToList();//通过部门ID 查找到对应的角色
                List item = new List();
                foreach (var Role in Roles)
                {
                    item.Add(new SelectListItem { Text = Role.name, Value = Role.role_id.ToString() });
                }
                //将数据Json化并传到前台视图
                return Json(new { data = item }, JsonRequestBehavior.AllowGet);
            }
        }

 三、在需要显示多级联动的视图页面写上如下代码

  
    
class="layui-form-item">
        class="layui-form-label">部门：
        
class="layui-input-inline">
            <select name="Dep" lay-filter="parentDep" id="Dep">
                "">——请选择部门——
            select>
        
        class="layui-form-label">角色：
        
class="layui-input-inline">
            <select name="Role" id="Role" lay-filter="RoleInfo">
                "">——请选择角色——
            select>
        
    

 四、JS部分的代码

　　注意：有的伙伴可能需要先引入jquery；根据自己的需求以及实际情况进行引入

 

1.select的chage监听事件使用：

form.on('select(myselect)', function(data){}） 其中myselect是select的 lay-filter属性值

2.数据异步加载到select的option中之后，点击该select会发现layui的选中效果不起作用，需要使用
form.render('select');重新渲染一次，就可以正常使用。

 

联动效果如下：