jQuery+Ajax+JSON实现下拉列表联动

JSON形式的数组：[{id:"1",name:"amdin"},{id:"1",name:"amdin"}]

 

前台代码：

      <scriptsrc="http://www.cnblogs.com/js/jquery.js"type="text/javascript"></script>

    <scriptsrc="http://www.cnblogs.com/js/ajax.js"type="text/javascript"></script>

    <scripttype="text/javascript">

        $(document).ready(function () {

            //要请求的一级机构JSON获取页面

            varurl="HandlerBranchOne.aspx";

            $.getJSON(url,function (data) {

                //对请求返回的JSON格式进行分解加载

                $(data).each(function () {

                    $("#ddlBranchOne").append($("<option/>").text(this.name).attr("value",this.id));

                });

            });

            //一级下拉联动二级下拉

            $("#ddlBranchOne").change(function () {

                //清除二级下拉列表

                $("#ddlBranchTwo").empty();

                $("#ddlBranchTwo").append($("<option/>").text("--请选择--").attr("value","-1"));

                //要请求的二级下拉JSON获取页面

                varurl="HandlerBranchTwo.aspx";

                //将选中的一级下拉列表项的id传过去

                $.getJSON(url, { id:$(this).attr("value") },function (data) {

                    //对请求返回的JSON格式进行分解加载

                    $(data).each(function () {

                        $("#ddlBranchTwo").append($("<option/>").text(this.name).attr("value",this.id));

                    });

                });

            });

            //二级下拉联动三级下拉

            $("#ddlBranchTwo").change(function () {

                //清除三级下拉列表

                $("#ddlBranchThree").empty();

                $("#ddlBranchThree").append($("<option/>").text("--请选择--").attr("value","-1"));

                //要请求的三级下拉JSON获取页面

                varurl="HandlerBranchThree.aspx";

                //将选择的二级下拉列表项的id传过去

                $.getJSON(url, { id:$(this).attr("value") },function (data) {

                    //对请求返回的JSON格式进行分解加载

                    $(data).each(function () {

                        $("#ddlBranchThree").append($("<option/>").text(this.name).attr("value",this.id));

                    });

                });

            });

        });

         

    

   

    </script>

后台代码：

HandlerBranchOne.aspx：

                  protectedvoidPage_Load(objectsender, EventArgse)

        {

            stringresult=GetBranchOneJSON();

            Response.Write(result);

        }

        //获取一级机构的JSON数组

        privatestringGetBranchOneJSON()

        {

            IList<Models.Config_file_first_kind>fk=BLL.Config_file_first_kindManager.GetAllConfig_file_first_kinds();

            StringBuildersb=newStringBuilder();

            for (inti=0; i<fk.Count; i++)

            {

                stringjson="{"+string.Format("id:'{0}',name:'{1}'", fk[i].Id, fk[i].First_kind_name) +"}";

                //sb.AppendFormat("{id:'{0}',name:'{1}'}", fk[i].Id, fk[i].First_kind_name);

                sb.Append(json);

                if (i!=fk.Count-1)

                {

                    sb.Append(",");

                }

            }

            return"["+sb.ToString()+"]";

        }

HandlerBranchTwo.aspx：

                       protectedvoidPage_Load(objectsender, EventArgse)

        {

            stringid=Request.QueryString["id"];

            if (!string.IsNullOrEmpty(id))

            {

                stringresult=GetBranchTwoJSON(id);

                Response.Write(result);

            }

        }

        //根据一级id获取二级JSON

        privatestringGetBranchTwoJSON(stringid)

        {

            IList<Models.Config_file_second_kind>sk=BLL.Config_file_second_kindManager.GetConfig_file_second_kindByCfk_no(id);

            StringBuildersb=newStringBuilder();

            for (inti=0; i<sk.Count; i++)

            {

                stringjson="{"+string.Format("id:'{0}',name:'{1}'", sk[i].Id, sk[i].Second_kind_name)+"}";

                sb.Append(json);

                if (i!=sk.Count-1)

                {

                    sb.Append(",");

                }

            }

            return"["+sb.ToString() +"]";

        }

HandlerBranchThree.aspx：

               protectedvoidPage_Load(objectsender, EventArgse)

        {

            stringid=Request.QueryString["id"];

            if (!string.IsNullOrEmpty(id))

            {

                stringresult=GetBranchThreeJSON(id);

                Response.Write(result);

            }

        }

        //根据二级下拉id获取三级下拉

        privatestringGetBranchThreeJSON(stringid)

        {

            IList<Models.Config_file_third_kind>tk=BLL.Config_file_third_kindManager.GetConfig_file_third_kindByCsk_no(id);

            StringBuildersb=newStringBuilder();

            for (inti=0; i<tk.Count; i++)

            {

                stringjson="{"+string.Format("id:'{0}',name:'{1}'", tk[i].Id, tk[i].Third_kind_name) +"}";

                sb.Append(json);

                if (i!=tk.Count-1)

                {

                    sb.Append(",");

                }

            }

            return"["+sb.ToString() +"]";

        }

转载于:https://www.cnblogs.com/yinxiaofeng/archive/2012/09/07/2674422.html