一、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.$;

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

     /// <summary>
/// 获取部门信息
/// </summary>
[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);
}
}   /// <summary>
/// 通过部门ID来获取角色
/// </summary>
/// <param name="dep_id">部门ID</param>
/// <returns></returns>
[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<SelectListItem> item = new List<SelectListItem>();
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);
}
}

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

  <!--部门角色二级联动-->
<div class="layui-form-item">
<label class="layui-form-label">部门:</label>
<div class="layui-input-inline">
<select name="Dep" lay-filter="parentDep" id="Dep">
<option value="">——请选择部门——</option>
</select>
</div>
<label class="layui-form-label">角色:</label>
<div class="layui-input-inline">
<select name="Role" id="Role" lay-filter="RoleInfo">
<option value="">——请选择角色——</option>
</select>
</div>
</div>

四、JS部分的代码

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

<script src="~/Scripts/jquery-3.5.1.js"></script>
<script type="text/javascript">
// 封装获取角色的函数:通过部门ID得到角色
function getRoles(data) {
//获取到部门框中的Value部门的ID
var dep_id = {
dep_id: data.value
}
//再利用ajax将数据传到后端,来获取到对应下拉框选项而出现的值
//检查项目添加到下拉框中
$.ajax({
url: "@Url.Action("GetRolelist")",
dataType: 'json',
data: JSON.stringify(dep_id),//将参数Json化,在传递给后台控制器
contentType: "application/json",
type: 'post',
success: function (result) {
console.info(result.data);
$("#Role").empty();//清空下拉框的值
$.each(result.data, function (index, item) {
$('#Role').append(new Option(item.Text, item.Value));// 下拉菜单里添加元素
});
layui.form.render("select");//重新渲染 固定写法
}
});
};
//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.$;
// 得到部门
$.ajax({
url: "@Url.Action("GetDeplist")",
dataType: 'json',
type: 'post',
success: function (result) {
$.each(result.data, function (index, item) {
$('#Dep').append(new Option(item.name, item.dep_id));// 下拉菜单里添加元素
});
layui.form.render("select");//重新渲染 固定写法
}
});
// 联动
form.on('select(parentDep)', function (data) {
//监听到了下拉框选择的选项,传递过来
//console.info(data);
getRoles(data);
});
});
</script>

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

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

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

联动效果如下:

C# MVC LayUI实现下拉框二级联动的更多相关文章

  1. asp 下拉框二级联动

    <script language = "JavaScript"> //js开始 var aaa;//定义aaa变量 aaa=0;//aaa赋0 bb = new Arr ...

  2. django:下拉框二级联动实现

    注意:只列举核心部分代码 前台模板: 第一级下拉菜单: <div class="col-sm-4"> <select data-placeholder=" ...

  3. js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  4. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

  5. mvc SelectList 给下拉框 @Html.DropDownList绑定值

    后台代码: public class DropController : Controller { // GET: Drop public ActionResult Index() { List< ...

  6. MVC controller序列化下拉框给view

    在开发中遇到的小问题,一个下拉框,一个文本域 ,文本域根据下拉框变化: 由于是一次全部取出的值,下拉框变化不想再去取值: 在后台把值先序列化给前台用 controller: List<Lesso ...

  7. MVC学习系列7--下拉框的联动

    [使用场景:两个DropDownList的联动,选择其中一个DropDownList,然后加载数据到另外的一个DropDownList上] 这里,我打算实现的需求是:有两个DropDownList,一 ...

  8. ASP.NET——实现两个下拉框动态联动

    引入: 在网页中,我们经常会遇到下图中的情况.首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市.这样设计极大的方便了用户的查找.那这是如何实现的呢? 1.建立数据库 " ...

  9. 通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")

    <html> <head> <meta charset="utf-8"> <title>下拉框</title> < ...

随机推荐

  1. & 异步使用场景

    异步的使用场景: 1.不涉及共享资源,或对共享资源只读,即非互斥操作 2.没有时序上的严格关系 3.不需要原子操作,或可以通过其他方式控制原子性 4.常用于IO操作等耗时操作,因为比较影响客户体验和使 ...

  2. django-模型层(ORM语法)

    今日内容概要(重要) 模型层(ORM语法):跟数据库打交道的 单表查询(增删改查) 常见的十几种查询方法 神奇的双下划线查询 多表操作 外键字段的增删改查 跨表查询(重点) 子查询 联表查询 今日内容 ...

  3. jchdl - GSL实例 - MulC2(有符号数的乘法)

      这里的实现,先把符号位取出来,使用两个正数相乘,然后在把符号加到乘积上.   参考链接 https://github.com/wjcdx/jchdl/blob/master/src/org/jch ...

  4. js在运算时的类型转换

    日期类型与数字类型的运算 在加法时将日期对象与数字都当作字符串进行连接 字符串的运算方式中没有减法.乘法.除法.转化成数字类型进行运算 字符串类型字符与数字类型的运算 在加法时将二者都转换成字符串进行 ...

  5. MySQL国内镜像下载地址

    最近重新下载MySQL发现官网下载速度不是一般的慢,官网下载要几个钟而且一不注意就被取消下载了,实在受不了 可以使用sohu的镜像:http://mirrors.sohu.com/mysql/MySQ ...

  6. ActiveMQ 笔记(七)ActiveMQ的多节点集群

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.Activemq 的集群思想 1.使用Activemq集群的原因 面试题: 引入消息中间件后如何保证 ...

  7. Java实现 蓝桥杯 算法提高 矩阵相乘

    算法提高 矩阵相乘 时间限制:1.0s 内存限制:256.0MB 问题描述 小明最近在为线性代数而头疼,线性代数确实很抽象(也很无聊),可惜他的老师正在讲这矩阵乘法这一段内容. 当然,小明上课打瞌睡也 ...

  8. Java实现 LeetCode 82 删除排序链表中的重复元素 II(二)

    82. 删除排序链表中的重复元素 II 给定一个排序链表,删除所有含有重复数字的节点,只保留原始链表中 没有重复出现 的数字. 示例 1: 输入: 1->2->3->3->4- ...

  9. Java实现 洛谷 P1046 陶陶摘苹果

    import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner sc = ...

  10. java实现整数翻转

    ** 整数翻转** 以下程序把一个整数翻转(8765变为:5678),请补充缺少的代码. int n = 8765; int m = 0; while(n>0) { m = __________ ...