星期六

Ajax实现无刷新三联动下拉框

文章来源：http://singlepine.cnblogs.com/archive/2005/12/13/257954.html


1.html代码

  1<HTML>
  2    <HEAD>
  3        <title>Ajax实现无刷新三联动下拉框</title>
  4        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
  5        <meta content="C#" name="CODE_LANGUAGE">
  6        <meta content="JavaScript" name="vs_defaultClientScript">
  7        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
  8        <SCRIPT language="javascript">            
  9            //城市------------------------------
 10            function cityResult() 
 11            { 
 12                var city=document.getElementById("DropDownList1");
 13                AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
 14            }
 15            
 16            function get_city_Result_CallBack(response)
 17            {
 18                if (response.value != null)
 19                {                    
 20                    //debugger;
 21                    document.all("DropDownList2").length=0;　　　　            
 22　　　　            var ds = response.value;
 23                    if(ds != null && typeof(ds) == "object" && ds.Tables != null)
 24                    {                    
 25                        for(var i=0; i<ds.Tables[0].Rows.length; i++)
 26　　　　                {
 27　　　　                    var name=ds.Tables[0].Rows[i].city;
 28　　　　　　                var id=ds.Tables[0].Rows[i].cityID;
 29　　　　　　                document.all("DropDownList2").options.add(new Option(name,id));
 30　　　　                }
 31                    }
 32                }                
 33                return
 34            }
 35            //市区----------------------------------------
 36            function areaResult() 
 37            { 
 38                var area=document.getElementById("DropDownList2");
 39                AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
 40            }
 41            function get_area_Result_CallBack(response)
 42            {
 43                if (response.value != null)
 44                {                    
 45                    document.all("DropDownList3").length=0;　　　　            
 46　　　　            var ds = response.value;
 47                    if(ds != null && typeof(ds) == "object" && ds.Tables != null)
 48                    {                    
 49                        for(var i=0; i<ds.Tables[0].Rows.length; i++)
 50　　　　                {
 51　　　　　　                var name=ds.Tables[0].Rows[i].area;
 52　　　　　　                var id=ds.Tables[0].Rows[i].areaID;
 53　　　　　　                document.all("DropDownList3").options.add(new Option(name,id));
 54　　　　                }                
 55                    }
 56                }
 57                return
 58            }
 59            function getData()
 60            {
 61                var province=document.getElementById("DropDownList1");
 62                var pindex = province.selectedIndex;
 63                var pValue = province.options[pindex].value;
 64                var pText  = province.options[pindex].text;
 65                
 66                var city=document.getElementById("DropDownList2");
 67                var cindex = city.selectedIndex;
 68                var cValue = city.options[cindex].value;
 69                var cText  = city.options[cindex].text;
 70                
 71                var area=document.getElementById("DropDownList3");
 72                var aindex = area.selectedIndex;
 73                var aValue = area.options[aindex].value;
 74                var aText  = area.options[aindex].text;
 75                
 76                var txt=document.getElementById("TextBox1");                                
 77
 78                document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;
 79            }
 80        </SCRIPT>
 81    </HEAD>
 82    <body ms_positioning="GridLayout">
 83        <form id="Form1" method="post" runat="server">
 84            <TABLE id="Table1" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px" cellSpacing="1"
 85                cellPadding="1" width="300" border="1" bgColor="#ccff66">
 86                <TR>
 87                    <TD>省市</TD>
 88                    <TD><asp:dropdownlist id="DropDownList1" runat="server"></asp:dropdownlist></TD>
 89                </TR>
 90                <TR>
 91                    <TD>城市</TD>
 92                    <TD><asp:dropdownlist id="DropDownList2" runat="server"></asp:dropdownlist></TD>
 93                </TR>
 94                <TR>
 95                    <TD>市区</TD>
 96                    <TD><asp:dropdownlist id="DropDownList3" runat="server"></asp:dropdownlist></TD>
 97                </TR>
 98            </TABLE>
 99            <asp:TextBox id="TextBox1" style="Z-INDEX: 102; LEFT: 416px; POSITION: absolute; TOP: 48px" runat="server"
100                Width="424px"></asp:TextBox><INPUT style="Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px"
101                type="button" value="test" onclick="getData();">
102        </form>
103    </body>
104</HTML>

2.cs代码

 1using System;
 2using System.Data;
 3using System.Data.SqlClient;
 4namespace AjaxTest
 5{
 6    /**//// <summary>
 7    /// Summary description for AjaxMethod.
 8    /// </summary>
 9    public class AjaxMethod
10    {
11        GetPovinceListGetPovinceList
18
19        GetCityListGetCityList
27
28        GetAreaListGetAreaList
36    
37        GetDataSetGetDataSet
47    }
48}

3.AjaxMethod

 1public class WebForm1 : System.Web.UI.Page
 2    {
 3        protected System.Web.UI.WebControls.DropDownList DropDownList1;
 4        protected System.Web.UI.WebControls.DropDownList DropDownList2;
 5        protected System.Web.UI.WebControls.TextBox TextBox1;
 6        protected System.Web.UI.WebControls.DropDownList DropDownList3;
 7    
 8        private void Page_Load(object sender, System.EventArgs e)
 9        {    
10            Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
11            if(!Page.IsPostBack)
12            {
13                this.DropDownList1.DataSource=AjaxMethod.GetPovinceList();
14                this.DropDownList1.DataTextField="province";
15                this.DropDownList1.DataValueField="provinceID";
16                this.DropDownList1.DataBind();
17                
18                this.DropDownList1.Attributes.Add("onclick","cityResult();");
19                this.DropDownList2.Attributes.Add("onclick","areaResult();");
20            }
21        }
22
23        Web Form Designer generated codeWeb Form Designer generated code        
43    }

4.web.config

1<httpHandlers>
2            <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
3    </httpHandlers>


5.ajax.dll下载/Files/singlepine/Ajax.rar
6.真实数据库下载/Files/singlepine/area.rar
7.具体配置参见http://singlepine.cnblogs.com/articles/253393.html
8.源代码下载/Files/singlepine/AjaxTest.rar
9.XmlHttp实现无刷新三联动下拉框

posted on 2005-12-28 14:31  星期六  阅读(310)  评论(0)    收藏  举报