layedit 内容变化事件_C# MVC LayUI实现下拉框二级联动

一、layui.use

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);

}

}

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

部门：

——请选择部门——

角色：

——请选择角色——

四、JS部分的代码

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

// 封装获取角色的函数：通过部门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);

});

});

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

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

2.数据异步加载到select的option中之后，点击该select会发现layui的选中效果不起作用，需要使用

form.render('select');重新渲染一次，就可以正常使用。

联动效果如下：

asp 下拉框二级联动

django：下拉框二级联动实现

注意:只列举核心部分代码 前台模板: 第一级下拉菜单:

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

这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 /p>

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

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

MVC controller序列化下拉框给view

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

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

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

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

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

Excel下拉选项二级联动

在日常工作中,难免遇到操作excel的时候,二级联动下拉选项多用于像地市区县的应用场景 1)先把要联动的内容准备好,把它放到第二个sheet页中 2)操作级联的文本 全部选中之后,Ctrl+G -- ...

随机推荐

Android 在非Activity的类中调用startActivityForResult

http://www.360doc.com/content/11/0720/10/7322578_134657348.shtml

CSS 学习笔记

0.CSS概念层叠样式表(Cascading Style Sheets),CSS的来历就不必多说了.可以简单的理解为万维网联盟(w3c)为了丰富HTML页面的布局和外观而指定的一种标准. 1.CSS实 ...

[转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript

来源 http://blog.csdn.net/cuixiping/article/details/45932793 canvas转换为dataURL (从canvas获取dataURL) var d ...

一个很好的Delphi博客

一个很好的Delphi博客,主人叫万一 http://www.cnblogs.com/del/archive/2011/09/21/2183007.html

从Jetty、Tomcat和Mina中提炼NIO构架网络服务器的经典模式(一)

本文转载自 http://blog.csdn.net/cutesource/article/details/6192016 如何正确使用NIO来构架网络服务器一直是最近思考的一个问题,于是乎分析了一下 ...

Proactor 学习1

Proactor    An Object Behavioral Pattern for Demultiplexingand Dispatching Handlers for Asynchronous ...

MyEclipse6.5的反编译插件的安装

常用的几种反编译工具 1. JD-GUI[推荐] JD-GUI是属于Java Decompiler项目(JD项目)下个的图形化运行方式的反编译器.JD-Eclipse属于Java Decompiler ...

abp 修改abp.zero的实体映射类，使生成的表和字段为大写状态

在我们项目中,由于涉及到报表配置管理,可以通过一段sql快捷的配置出一个报表页面.部分sql会与abp框架的一些系统表做关联查询,而abp的映射类没有单独设置表和字段的名称,默认用类名和属性名,区分大 ...

解决 windows npm ERR! asyncWrite is not a function 问题

重装过node,cmd中 node -v,npm -v 提示版本都没有问题,但是在vue项目中npm i 的时候出现了npm ERR! asyncWrite is not a function 问题, ...

Ubuntu-18.04 下修改root用户密码，安装SSH服务，允许root用户远程登录，安装vsftp服务器

修改root用户密码 打开终端,输入 sudo passwd root 指令: 安装SSH服务 ssh默认端口号是22,可以在/etc/ssh/sshd_config文件中修改 查看服务器否开启:ne ...