jquery 无刷新多级联动

浏览数：45 / 时间：2015年06月09日

原先不熟悉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             });