学步园

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

分公司:
                                        <select id="SelectCom">
                                            <option value="">--请选择分公司--   </option>
                                        </select>
                                        电厂:
                                        <select id="SelectORG">
                                            <option value="">--请选择电厂--</option>
                                        </select>
                                        机组:
                                        <select id="SelectuUnit">
                                            <option value="">--请选择电厂--</option>
                                        </select>

web页面

private string GetData(String DataType,string Id) {

        DataTable data = new DataTable();
        string str = "";
        switch (DataType) { 
            case "Com":
                data = blldou.GetComByCid(Id);
                break;
            case "Org":
                data = blldou.GetOrgByCid(Id);
                break;
            case "Unit":
                data = blldou.GetUnitByOid(Id);
                break;
        }
        if (data != null)
        {
            for (int i = 0; i < data.Rows.Count; i++)
            {
                string TempStr = "[\"" + data.Rows[i][0] + "\",\"" + data.Rows[i][1] + "\"]";
                str += "," + TempStr;
            }
            str = "[" + str.Substring(1) + "]";
        }
        else {
            str = "[]";
        }
        return str;
    }

获取数据的后台代码

$(function () {

        //初始加载公司
            $.post("Data.aspx", { DataType: "Com", Id: null }, function (data) {

                var Tempdata = $.parseJSON(data);
                for (var i = 0; i < Tempdata.length; i++) {
                    $("#SelectCom").append("<option value='" + Tempdata[i][0] + "'>" + Tempdata[i][1] + "</option>");
                }
            });
            //选中公司后加载电厂数据
            $("#SelectCom").change(function () {
                $("#SelectORG").empty();
                $("#SelectORG").append("<option value=''>--请选择电厂--</option>");
                $("#SelectuUnit").empty();
                $("#SelectuUnit").append("<option value=''>--请选择机组--</option>");
                $.post("Data.aspx", { DataType: "Org", Id: $(this).find("option:checked").val() }, function (data) {

                    var Tempdata = $.parseJSON(data);
                    for (var i = 0; i < Tempdata.length; i++) {
                        $("#SelectORG").append("<option value='" + Tempdata[i][0] + "'>" + Tempdata[i][1] + "</option>");
                    }
                });
            });
            //选中电厂后加载机组数据
            $("#SelectORG").change(function () {
                $("#SelectuUnit").empty();
                $("#SelectuUnit").append("<option value=''>--请选择机组--</option>");
                $.post("Data.aspx", { DataType: "Unit", Id: $(this).find("option:checked").val() }, function (data) {

                    var Tempdata = $.parseJSON(data);
                    for (var i = 0; i < Tempdata.length; i++) {
                        $("#SelectuUnit").append("<option value='" + Tempdata[i][0] + "'>" + Tempdata[i][1] + "</option>");
                    }
                });
            });