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() +"]";

        }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM