jQuery Ajax三级联动

LvMax

$.getJSON版
<script type="text/javascript">        $(document).ready(function(){            var addSelOption = function(jq) //方法addSelOption : 为匹配对象添加一项"请选择"， jq ： jQuery对象            {                //创建option对象，并设置文本为"请选择"，value值为-1                var opt = $("<option/>").text("请选择").attr("value", "-1");                //将option对象添加到select中                jq.append(opt);            }            //获取请求的URL            var requestUrl = "/TheOneHRWeb/handler/GetBranchOne.aspx";            /*                通过 HTTP GET 请求载入 JSON 数据                json : JSON对象            */            $.getJSON(requestUrl, function(json){                //遍历JSON对象                $(json).each(function(){                    //创建option对象并设置相应的文本值和value值                    var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);                    //将option对象添加到匹配的jQuery对象中                    $("#branchOne").append(opt);                });            });            $("#branchOne").change(function(){                    //获取请求的URL                    var requestUrl = "/TheOneHRWeb/handler/GetBranchTwo.aspx";                    //获取下拉菜单的value值                    var branchId = $(this).val();                    if(branchId != "-1")                    {                        // {"branchID" : branchId} ： 传入参数                        $.getJSON(requestUrl, {"branchID" : branchId}, function(json){                            $("#branchTwo").empty();                            //$("#branchTwo").append($("<option/>").text("请选择").attr("value", "-1"));                            addSelOption($("#branchTwo"));                            //遍历JSON对象                            $(json).each(function(){                                //创建option对象并设置相应的文本值和value值                                var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);                                //将option对象添加到匹配的jQuery对象中                                $("#branchTwo").append(opt);                            });                           $("#branchTwo").change(function(){                                //获取下拉菜单的value值                                 var branchId = $(this).val();                                 //获取请求的URL                                var requestUrl = "/TheOneHRWeb/handler/GetBranchThird.aspx";                                if(branchId != "-1")                                {                                     $.getJSON(requestUrl, {"branchID" : branchId}, function(json){                                        $("#branchThree").empty();                                        addSelOption($("#branchThree"));                                        //遍历JSON对象                                        $(json).each(function(){                                            //创建option对象并设置相应的文本值和value值                                            var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);                                            //将option对象添加到匹配的jQuery对象中                                            $("#branchThree").append(opt);                                        });                                    });                                }                                 else                                {                                    $("#branchThree").empty();                                    addSelOption($("#branchThree"));                                }                           });                        });                    }                    else                    {                        $("#branchTwo").empty();                        addSelOption($("#branchTwo"));                        $("#branchThree").empty();                        addSelOption($("#branchThree"));                    }                             });        });    </script>

$.ajax版
<script type="text/javascript">        $(document).ready(function(){            var addSelOption = function(jq) //方法addSelOption : 为匹配对象添加一项"请选择"， jq ： jQuery对象            {                //创建option对象，并设置文本为"请选择"，value值为-1                var opt = $("<option/>").text("请选择").attr("value", "-1");                //将option对象添加到select中                jq.append(opt);            }            //添加span节点并添加loadding的gif图片            var loadImg = function(br){                $("#loaddingImg").find("img").remove();                var oSpan = $("<span id='loaddingImg'><img src='/TheOneHRWeb/images/loadding_indicator.gif' /></span>");                br.after(oSpan);            }            var requestUrl = "/TheOneHRWeb/handler/GetBranchOne.aspx";            $.ajax({                //type : "get", //默认为get                dataType : "json",                url : requestUrl,                success : function(json){                    $(json).each(function(){                        var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);                        $("#branchOne").append(opt);                    });                    $("#branchOne").change(function(){                        var branchId = $(this).val();                        if(branchId != "-1"){                            var requestUrl = "/TheOneHRWeb/handler/GetBranchTwo.aspx";                            $.ajax({                                dataType : "json",                                url : requestUrl,                                //传入的参数                                data : "branchID=" + branchId,                                //发送请求前加载loadding的gif图片                                beforeSend : loadImg($("#branchOne")),                                success : function(json){                                    //删除gif图片的span节点                                    $("#loaddingImg").remove();                                    $("#branchTwo").empty();                                    addSelOption($("#branchTwo"));                                    $(json).each(function(){                                        var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);                                        $("#branchTwo").append(opt);                                    });                                }                            });                        }                        else{                            $("#branchTwo").empty();                            addSelOption($("#branchTwo"));                            $("#branchThree").empty();                            addSelOption($("#branchThree"));                        }                    });                    $("#branchTwo").change(function(){                        var branchId = $(this).val();                        if(branchId != "-1"){                            var requestUrl = "/TheOneHRWeb/handler/GetBranchThird.aspx";                            $.ajax({                                dataType : "json",                                url : requestUrl,                                data : "branchID=" + branchId,                                beforeSend : loadImg($("#branchTwo")),                                success : function(json){                                    $("#loaddingImg").remove();                                    $("#branchThree").empty();                                    addSelOption($("#branchThree"));                                    $(json).each(function(){                                        var opt = $("<option/>").text(this.branchName).attr("value", this.branchID);                                        $("#branchThree").append(opt);                                    });                                }                            });                        }                        else{                            $("#branchThree").empty();                            addSelOption($("#branchThree"));                        }                    });                }            });        });    </script>


I级机构: <select id="branchOne">                        <option selected="selected" value="-1">请选择</option>                    </select>        II级机构:<select id="branchTwo">                            <option selected="selected" value="-1">请选择</option>                        </select>         III级机构:<select id="branchThree">                            <option selected="selected" value="-1">请选择</option>                        </select>