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

晨曦之光 发布于 2012/03/09 14:58
阅读 762
收藏 0

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=;             
            
var ds = response.value;
                    
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    
{                    
                        
for(var i=; i<ds.Tables[].Rows.length; i++)
                
{
                    
var name=ds.Tables[].Rows[i].city;
                
var id=ds.Tables[].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=;             
            
var ds = response.value;
                    
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    
{                    
                        
for(var i=; i<ds.Tables[].Rows.length; i++)
                
{
                
var name=ds.Tables[].Rows[i].area;
                
var id=ds.Tables[].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代码
using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;
namespace  AjaxTest
{
    
/// <summary>
    
/// Summary description for WebForm1.
    
/// </summary>

    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.GetProvinceList();
                
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
    
{
        
GetProvinceList

        
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.真实数据库下载 area1.rar
7.源代码下载 AjaxTest.rar
 
原文链接:http://blog.csdn.net/21aspnet/article/details/1534287
加载中
返回顶部
顶部