轉:ajax實現三級連動

jonas401發表於2006-03-04


1.html程式碼

<HTML>
    
<HEAD>
        
<title>Ajax實現無重新整理三聯動下拉框</title>
        
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        
<meta content="C#" name="CODE_LANGUAGE">
        
<meta content="JavaScript" name="vs_defaultClientScript">
        
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        
<SCRIPT language="javascript">            
            
//城市------------------------------
            function cityResult() 
            

                
var city=document.getElementById("DropDownList1");
                AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
            }

            
            
function get_city_Result_CallBack(response)
            
{
                
if (response.value != null)
                
{                    
                    
//debugger;
                    document.all("DropDownList2").length=0;                
                
var ds = response.value;
                    
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    
{                    
                        
for(var i=0; i<ds.Tables[0].Rows.length; i++)
                    
{
                        
var name=ds.Tables[0].Rows[i].city;
                      
var id=ds.Tables[0].Rows[i].cityID;
                      document.all(
"DropDownList2").options.add(new Option(name,id));
                    }

                    }

                }
                
                
return
            }

            
//市區----------------------------------------
            function areaResult() 
            

                
var area=document.getElementById("DropDownList2");
                AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
            }

            
function get_area_Result_CallBack(response)
            
{
                
if (response.value != null)
                
{                    
                    document.all(
"DropDownList3").length=0;                
                
var ds = response.value;
                    
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    
{                    
                        
for(var i=0; i<ds.Tables[0].Rows.length; i++)
                    
{
                      
var name=ds.Tables[0].Rows[i].area;
                      
var id=ds.Tables[0].Rows[i].areaID;
                      document.all(
"DropDownList3").options.add(new Option(name,id));
                    }
                
                    }

                }

                
return
            }

            
function getData()
            
{
                
var province=document.getElementById("DropDownList1");
                
var pindex = province.selectedIndex;
                
var pValue = province.options[pindex].value;
                
var pText  = province.options[pindex].text;
                
                
var city=document.getElementById("DropDownList2");
                
var cindex = city.selectedIndex;
                
var cValue = city.options[cindex].value;
                
var cText  = city.options[cindex].text;
                
                
var area=document.getElementById("DropDownList3");
                
var aindex = area.selectedIndex;
                
var aValue = area.options[aindex].value;
                
var aText  = area.options[aindex].text;
                
                
var txt=document.getElementById("TextBox1");                                

                document.getElementById(
"<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"區:"+aValue+"|"+aText;
            }

        
</SCRIPT>
    
</HEAD>
    
<body ms_positioning="GridLayout">
        
<form id="Form1" method="post" runat="server">
            
<TABLE id="Table1" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px" cellSpacing="1"
                cellPadding
="1" width="300" border="1" bgColor="#ccff66">
                
<TR>
                    
<TD>省市</TD>
                    
<TD><asp:dropdownlist id="DropDownList1" runat="server"></asp:dropdownlist></TD>
                
</TR>
                
<TR>
                    
<TD>城市</TD>
                    
<TD><asp:dropdownlist id="DropDownList2" runat="server"></asp:dropdownlist></TD>
                
</TR>
                
<TR>
                    
<TD>市區</TD>
                    
<TD><asp:dropdownlist id="DropDownList3" runat="server"></asp:dropdownlist></TD>
                
</TR>
            
</TABLE>
            
<asp:TextBox id="TextBox1" style="Z-INDEX: 102; LEFT: 416px; POSITION: absolute; TOP: 48px" runat="server"
                Width
="424px"></asp:TextBox><INPUT style="Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px"
                type
="button" value="test" onclick="getData();">
        
</form>
    
</body>
</HTML>

2.cs程式碼

public class WebForm1 : System.Web.UI.Page
    
{
        
protected System.Web.UI.WebControls.DropDownList DropDownList1;
        
protected System.Web.UI.WebControls.DropDownList DropDownList2;
        
protected System.Web.UI.WebControls.TextBox TextBox1;
        
protected System.Web.UI.WebControls.DropDownList DropDownList3;
    
        
private void Page_Load(object sender, System.EventArgs e)
        
{    
            Ajax.Utility.RegisterTypeForAjax(
typeof(AjaxMethod));
            
if(!Page.IsPostBack)
            
{
                
this.DropDownList1.DataSource=AjaxMethod.GetPovinceList();
                
this.DropDownList1.DataTextField="province";
                
this.DropDownList1.DataValueField="provinceID";
                
this.DropDownList1.DataBind();
                
                
this.DropDownList1.Attributes.Add("onclick","cityResult();");
                
this.DropDownList2.Attributes.Add("onclick","areaResult();");
            }

        }


        
Web Form Designer generated code        
    }

3.AjaxMethod

using System;
using System.Data;
using System.Data.SqlClient;
namespace AjaxTest
{
    
/// <summary>
    
/// Summary description for AjaxMethod.
    
/// </summary>

    public class AjaxMethod
    
{
        
GetPovinceList

        
GetCityList

        
GetAreaList
    
        
GetDataSet
    }

}

4.web.config

<httpHandlers>
            
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
    
</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實現無重新整理三聯動下拉框

相關文章