• jquery 无刷新多级联动


    原先不熟悉jquery时,总在寻找无刷新的方法,在此不断的积累自己所知道的jquery属性,常用方法。以下为jquery实现的无刷新联动事件


     1     分公司:
     2                                         <select id="SelectCom">
     3                                             <option value="">--请选择分公司--   </option>
     4                                         </select>
     5                                         电厂:
     6                                         <select id="SelectORG">
     7                                             <option value="">--请选择电厂--</option>
     8                                         </select>
     9                                         机组:
    10                                         <select id="SelectuUnit">
    11                                             <option value="">--请选择电厂--</option>
    12                                         </select>
    web页面
    
    
     1 private string GetData(String DataType,string Id) {
     2 
     3         DataTable data = new DataTable();
     4         string str = "";
     5         switch (DataType) { 
     6             case "Com":
     7                 data = blldou.GetComByCid(Id);
     8                 break;
     9             case "Org":
    10                 data = blldou.GetOrgByCid(Id);
    11                 break;
    12             case "Unit":
    13                 data = blldou.GetUnitByOid(Id);
    14                 break;
    15         }
    16         if (data != null)
    17         {
    18             for (int i = 0; i < data.Rows.Count; i++)
    19             {
    20                 string TempStr = "["" + data.Rows[i][0] + "","" + data.Rows[i][1] + ""]";
    21                 str += "," + TempStr;
    22             }
    23             str = "[" + str.Substring(1) + "]";
    24         }
    25         else {
    26             str = "[]";
    27         }
    28         return str;
    29     }
    获取数据的后台代码
    
    
    
     1 $(function () {
     2 
     3         //初始加载公司
     4             $.post("Data.aspx", { DataType: "Com", Id: null }, function (data) {
     5 
     6                 var Tempdata = $.parseJSON(data);
     7                 for (var i = 0; i < Tempdata.length; i++) {
     8                     $("#SelectCom").append("<option value='" + Tempdata[i][0] + "'>" + Tempdata[i][1] + "</option>");
     9                 }
    10             });
    11             //选中公司后加载电厂数据
    12             $("#SelectCom").change(function () {
    13                 $("#SelectORG").empty();
    14                 $("#SelectORG").append("<option value=''>--请选择电厂--</option>");
    15                 $("#SelectuUnit").empty();
    16                 $("#SelectuUnit").append("<option value=''>--请选择机组--</option>");
    17                 $.post("Data.aspx", { DataType: "Org", Id: $(this).find("option:checked").val() }, function (data) {
    18 
    19                     var Tempdata = $.parseJSON(data);
    20                     for (var i = 0; i < Tempdata.length; i++) {
    21                         $("#SelectORG").append("<option value='" + Tempdata[i][0] + "'>" + Tempdata[i][1] + "</option>");
    22                     }
    23                 });
    24             });
    25             //选中电厂后加载机组数据
    26             $("#SelectORG").change(function () {
    27                 $("#SelectuUnit").empty();
    28                 $("#SelectuUnit").append("<option value=''>--请选择机组--</option>");
    29                 $.post("Data.aspx", { DataType: "Unit", Id: $(this).find("option:checked").val() }, function (data) {
    30 
    31                     var Tempdata = $.parseJSON(data);
    32                     for (var i = 0; i < Tempdata.length; i++) {
    33                         $("#SelectuUnit").append("<option value='" + Tempdata[i][0] + "'>" + Tempdata[i][1] + "</option>");
    34                     }
    35                 });
    36             });
    View Code
  • 相关阅读:
    document.getElementById的简便方式
    uri编解码
    javascript数组
    前端网站收藏
    html5 canvas
    interview material
    Merge into(oracle)
    机器学习入门二 ----- 机器学习术语表
    机器学习入门一 ------- 什么是机器学习,机器学习的在实际中的用处
    Dubbo 源码分析系列之一环境搭建
  • 原文地址:https://www.cnblogs.com/DDSkay/p/4059799.html
Copyright © 2020-2023  润新知