layui与多级联动返填
<script>
layui.use(['form', 'layer'], function () {
$ = layui.jquery;
var form = layui.form()
, layer = layui.layer;
$(function () {
//学院
$.ajax({
url: "/Users/GetColleges",
type: "post",
async: false,
dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].CollegeId + '">' + data[i].CollegeName + '</option>'
$("[name=CollegeId]").append(op);
}
//返填
$.ajax({
url: "/Student/QuertById?Id="+@Request.QueryString["Id"],
type: "post",
async: false,
dataType: "json",
success: function (data) {
$("[name=StudentId]").val(@Request.QueryString["Id"]);
$("[name=StudentName]").val(data.StudentName);
$("[name=StudentIdCard]").val(data.StudentIdCard);
$("[name=CollegeId]").val(data.CollegeId);
$("[name=StudentNum]").val(data.StudentNum);
form.render('select');
var mid = data.MajorId;
var sid = data.StageId;
var cid = data.ClassId;
$.ajax({
url: "/Users/GetMajorsByCollegeId?CollegeId=" + data.CollegeId,
type: "post",
async: false,
dataType: "json",
success: function (data) {
$("[name=MajorId]").empty();
$("[name=MajorId]").append('<option value="0">--专业--</option>');
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].MajorId + '">' + data[i].MajorName + '</option>'
$("[name=MajorId]").append(op);
form.render('select');
}
$("[name=MajorId]").val(mid);
form.render('select');
$.ajax({
url: "/Users/GetStages?MajorId=" + mid,
type: "post",
async: false,
dataType: "json",
success: function (data) {
console.log(data);
$("[name=StageId]").empty();
$("[name=StageId]").append('<option value="0">--阶段--</option>');
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].StageId + '">' + data[i].StageName + '</option>'
$("[name=StageId]").append(op);
form.render('select');
}
$("[name=StageId]").val(sid);
form.render('select');
$.ajax({
url: "/Student/QueryBySid",
data: {
Id: sid,
},
type: "post",
async: false,
dataType: "json",
success: function (data) {
$("[name=ClassId]").empty();
$("[name=ClassId]").append('<option value="0">--班级--</option>');
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].ClassId + '">' + data[i].ClassName + '</option>'
$("[name=ClassId]").append(op);
form.render('select');
}
$("[name=ClassId]").val(cid);
form.render('select');
},
error: function (e) {
console.log(e);
}
})
}
})
}
})
}
})
}
})
})
//专业
form.on('select(collegeId)', function (data) {
$.ajax({
url: "/Users/GetMajorsByCollegeId?CollegeId=" + $("[name=CollegeId]").val(),
type: "post",
async: false,
dataType: "json",
success: function (data) {
$("[name=MajorId]").empty();
$("[name=MajorId]").append('<option value="0">--专业--</option>');
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].MajorId + '">' + data[i].MajorName + '</option>'
$("[name=MajorId]").append(op);
form.render('select');
}
}
})
})
//阶段
form.on('select(MajorId)', function (data) {
$.ajax({
url: "/Users/GetStages?MajorId=" + $("[name=MajorId]").val(),
type: "post",
async: false,
dataType: "json",
success: function (data) {
console.log(data);
$("[name=StageId]").empty();
$("[name=StageId]").append('<option value="0">--阶段--</option>');
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].StageId + '">' + data[i].StageName + '</option>'
$("[name=StageId]").append(op);
form.render('select');
}
}
})
})
//班级
form.on('select(stageId)', function (data) {
$.ajax({
url: "/Student/QueryBySid",
data: {
Id: $("[name=StageId]").val(),
},
type: "post",
async: false,
dataType: "json",
success: function (data) {
$("[name=ClassId]").empty();
$("[name=ClassId]").append('<option value="0">--班级--</option>');
for (var i = 0; i < data.length; i++) {
var op = '<option value="' + data[i].ClassId + '">' + data[i].ClassName + '</option>'
$("[name=ClassId]").append(op);
form.render('select');
}
},
error: function (e) {
console.log(e);
}
})
})
</script>
总结: 核心 ajax 毁掉函数中调下一级ajax
layui与多级联动返填的更多相关文章
- JS地址自动返填技术
系统设计地址为省市县三级联动,规范是规范了,但是无形中增加了系统操作的时间成本,因此设计地址自动返填技术,只要把地址拷贝到详细地址框中,可以自动返填到省市县三级联动的下拉框中. 还好洒家的大学不是混过 ...
- jQuery EasyUI编辑DataGrid用combobox实现多级联动
我在项目中设计课程表的时候需要用到老师和分类之间的多级联动. 首先是一张效果图: 下面是实现的代码: <body> <script type="text/javascrip ...
- JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)
JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...
- 微信小程序-多级联动
微信小程序中的多级联动 这里用到的案例是城市选择器 先上代码: .wxml <view class="{{boxHide}}"> <view>{{nian} ...
- PHP多级联动的学习(一)
我尝试在ThinkCMF中实现多级联动,首先我开始看了dede的联动类别管理前后台的代码以及他的数据库,经过非常多次的尝试,我渐渐有了一点想法,并给予实施. 首先写出前台的界面.如图. 然后在数据库中 ...
- vue在多级联动时,一些情况不用watch而用onchange会更好
onchange事件在内容改变且失去焦点时触发,因此在一些多级联动需要清空次级内容的时候,用onchange就非常有用了,尤其是浏览器会提前加载数据的情况下.有篇文章可以看一下,链接. PS:路漫漫其 ...
- [ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板
/** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.8 */ 接上一篇博客. 实现带缓存的仿亚马逊下拉面板 效果图: 图1 初始 图2 点击省份 ...
- DropDownList的多级联动
DropDownList的多级联动的问题最典型的案例就是实现省市级三级联动的案例,对这个问题的描述是当选中山东省之后,在选择市的下拉菜单时,市一栏只出现山东省下面的市.对于县也是同样的道理. 我也做的 ...
- jQuery cxSelect 多级联动下拉菜单
随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...
随机推荐
- Python修饰器讲解
转自:http://www.cnblogs.com/rollenholt/archive/2012/05/02/2479833.html 文章先由stackoverflow上面的一个问题引起吧,如果使 ...
- 深入探究jvm之GC的参数调优
在上一篇博客记录了GC的算法及种类,这篇博客主要记录一下GC的参数如何调整以提高jvm的性能. 一.堆的回顾: 堆的内存空间总体分为新生代和老年代,老年代存放的老年对象,新构造的对象分配在eden区中 ...
- go_切片
go语言中切片相当于array的一个view.其底层实现如下ptr指的是slice中打头的元素.len表示slice的长度.cap表示ptr到整个array的长度 slice可以向后扩展,但不能超过对 ...
- 01 lucene基础 北风网项目培训 Lucene实践课程 Lucene概述
lucene-core-2.4.1.jar是lucene开发的核心jar包,lucene-analyzers-2.4.1.jar也是必不可少的.lucene-highlighter-2.4.1.jar ...
- 128. Longest Consecutive Sequence (HashTable)
Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...
- SVN的“Invalid authz configuration”错误的解决方法
公司有人离职后,我把他svn账号删除 然后就报这个错了,我检查了authz文件,完全看不出什么错误.... 网上的各种方法试一遍,无果. 蹲个厕所,继续查这个问题 看到一个答案: 给不存在的组配置权限 ...
- JLRoute 使用
http://zhoulingyu.com/2016/01/03/iOS%E2%80%94%E2%80%94Scheme%E6%98%AF%E4%BB%80%E4%B9%88%E3%80%81%E6% ...
- Servlet小案例总结
亮点: 没有使用任何框架,视图层和业务层使用Servlet技术进行交互,持久层用java的jdbc工具类进行数据交互 较为底层,比较基础的工具类比较多,比如: BeanFactory工具类使用dom4 ...
- Opencv 发现轮廓 findContours
vector<vector<Point>> vec_p; vector<Vec4i> vec_4f; findContours(img_canny1, vec_p, ...
- IOS 获取农历方法(转)
声明:以下为使用iOS的 NSChineseCalendar 网上之前发现有人说这个方法不是完全准确,有些日期会显示的不对,本人没有验证过,也实在懒得用C++那套方法去实现. 另外我做的不过是个简单的 ...