jQuery Ajax三级联动

[size=x-large][color=red]$.getJSON版[/color][/size]

<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>

[size=x-large][color=red]$.ajax版[/color][/size]

<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>