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

1.html代码
< HTML >
    
< HEAD >
        
< title > Ajax实现无刷新三联动下拉框 </ title >
        
< meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
        
< meta  name ="CODE_LANGUAGE"  Content ="C#" >
        
< meta  name ="vs_defaultClientScript"  content ="JavaScript" >
        
< meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
        
< 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)
                
{                    
                    document.all(
"DropDownList2").length=0;
                
var piArray = response.value.split(",");
                
for(var i=0;i<piArray.length;i++)
                
{
                  
var ary1 = piArray[i].toString().split("|");
                  document.all(
"DropDownList2").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
                }
                
                }
                
                
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 piArray = response.value.split(",");
                
for(var i=0;i<piArray.length;i++)
                
{
                  
var ary1 = piArray[i].toString().split("|");
                  document.all(
"DropDownList3").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
                }
                
                }
                
                
return
            }

        
</ SCRIPT >
    
</ HEAD >
    
< body  MS_POSITIONING ="GridLayout" >
        
< form  id ="Form1"  method ="post"  runat ="server" >
            
< TABLE  id ="Table1"  style ="Z-INDEX: 104; LEFT: 96px; POSITION: absolute; TOP: 32px"  cellSpacing ="1"
                cellPadding
="1"  width ="300"  border ="1" >
                
< 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 >
        
</ form >
    
</ body >
</ HTML >
2.cs代码
public   class  AjaxDropDownList : System.Web.UI.Page
    
{
        
protected System.Web.UI.WebControls.DropDownList DropDownList1;
        
protected System.Web.UI.WebControls.DropDownList DropDownList2;
        
protected System.Web.UI.WebControls.DropDownList DropDownList3;
    
        
private void Page_Load(object sender, System.EventArgs e)
        
{            
            
if(!Page.IsPostBack)
            
{
                
this.DropDownList1.DataSource=AjaxMethod.GetPovinceList();
                
this.DropDownList1.DataTextField="province";
                
this.DropDownList1.DataValueField="provinceID";
                
this.DropDownList1.DataBind();

                Ajax.Utility.RegisterTypeForAjax(
typeof(AjaxMethod));
                
this.DropDownList1.Attributes.Add("onchange","cityResult();");
                
this.DropDownList2.Attributes.Add("onchange","areaResult();");
            }

        }


        
Web Form Designer generated code
    }
3.AjaxMethod
public   class  AjaxMethod
    
{        
        
public static string ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
    
        
GetDataSet

        
GetPovinceList

        
GetCityList

        
GetAreaList
    }
4.数据库 /Files/singlepine/area.rar
5.Ajax.dll /Files/singlepine/Ajax.rar
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值