zoukankan      html  css  js  c++  java
  • 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 

  • 相关阅读:
    PortalBasic Web 应用开发框架:应用篇(六) —— 公共组件
    如何提高Linq查询的性能
    Distributed SMS Processor
    新书《火球 UML大战需求分析》试读 第一章 大话UML
    UML 软件这是源基地软件大学
    Java多线程编程总结
    [译]扩展JavaScript功能的正确方法
    OEA体验:常用功能3 多对多关系
    MicroOrm.Net
    ASP.NET MVC Model元数据及其定制 [中篇]
  • 原文地址:https://www.cnblogs.com/LiChen19951127/p/9961911.html
Copyright © 2011-2022 走看看