AJAX无刷新下拉框联动

AJAX无刷新下拉框联动的简单示例，分别使用了AJAX组件和xmlHttp异步刷新两种方式。

前台代码:

 

<% ... @ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm8.aspx.cs" Inherits="WebApplication1.WebForm8"
    ValidateRequest="false" EnableEventValidation="false"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > AJAX无刷新下拉框联动 </ title >

     < script  language ="JavaScript" > ...
             /**//*作者: WhirlWind(20080424)*/
             
                //以XML获取下拉框4的数据
                var xmlHttp;
                function XmlPost(obj)
                ...{
　　                var svalue = obj.value;
　　                var webFileUrl = "?d3=" + svalue;
　　                //var result = "";
　　                // xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
　　                 if (window.ActiveXObject)//创建对象
                       ...{
                       this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                       }
                        else
                     ...{
                      this.xmlHttp = new XMLHttpRequest();
                      }
　　                 //将对象状态与事件相关联
                    xmlHttp.onreadystatechange=statechange;
　　                xmlHttp.open("POST", webFileUrl, false);
　　                xmlHttp.send("");
　　                //result = xmlHttp.responseText;
                　　
　　               
                }
                 function statechange()
                 ...{
                //判断异步调用是否已经完成
                if(xmlHttp.readystate==4)
                ...{
                    //判断完成的提示代码是否是OK状态
                 if(xmlHttp.status==200)
                 ...{ 
                 //将返回数据作为参数，传递给填充方法
                   FillData(xmlHttp.responseText);
                  }
                 }
                 else
                 ...{
                         var drr4=document.getElementById("<%=DropDownList4.ClientID %>");//服务器控件
                        var select1 = document.getElementById("Select1"); //HTML控件                                                                     
　                      for (i = select1.length; i >= 0; i--)                                                                    
　                     ...{                                                                                                          
                        select1.remove(i); //清空
                        drr4.remove(i);                                                                            
                        }
                      // alert("出现错误!");
                    }
               }
                 function FillData(result)
                  ...{
                     
　　                    var drr4=document.getElementById("<%=DropDownList4.ClientID %>");//服务器控件
                        var select1 = document.getElementById("Select1"); //HTML控件                                                                     
　                      for (i = select1.length; i >= 0; i--)                                                                    
　                     ...{                                                                                                          
                        select1.remove(i); //清空
                        drr4.remove(i);                                                                            
                        }
                     if(result != "")
　　                 ...{                                                                                                                                
　　　　                var piArray = result.split(",");//加载联动数据
　　　　                for(var i=0;i<piArray.length;i++)
　　　　                ...{

　　　　　　               
　　　　　　                var newOption = document.createElement("OPTION");                                                    
                            newOption.text=piArray[i].toString() ;                                    
                            newOption.value=piArray[i].toString();                                 
                            select1.options.add(newOption);     
                            
                            var newOption1 = document.createElement("OPTION");              
                            newOption1.text=piArray[i].toString() ;                                    
                            newOption1.value=piArray[i].toString(); 
                            drr4.options.add(newOption1);
                                          
　　　　                }
　　                }
　　                else
　　                ...{
　　　　                alert("返回的是空值!");
　　                }
                  }
           
     </ script >

     < style  type ="text/css" > ...
        #Select1
        {...}{
            width: 36px;
        }
        .style1
        {...}{
            color: #FF0000;
        }
     </ style >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
     </ asp:ScriptManager >
     < div >
         < span  class ="style1" > AJAX刷新： </ span >< br  />
        下拉框1： </ div >
     < asp:DropDownList  ID ="DropDownList1"  runat ="server"  AutoPostBack ="True"  OnSelectedIndexChanged ="DropDownList1_SelectedIndexChanged" >
     </ asp:DropDownList >
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     < br  />
    下拉框2:
     < asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
         < ContentTemplate >
             < asp:DropDownList  ID ="DropDownList2"  runat ="server" >
             </ asp:DropDownList >
         </ ContentTemplate >
     </ asp:UpdatePanel >
     < p >
         &nbsp; </ p >
     < p  class ="style1" >
        异步刷新： </ p >
     < p >
        下拉框3: </ p >
     < p >
         < asp:DropDownList  ID ="DropDownList3"  runat ="server" >
         </ asp:DropDownList >
     </ p >
     < p >
        下拉框4: </ p >
     < p >
         < asp:DropDownList  ID ="DropDownList4"  runat ="server" >
         </ asp:DropDownList >
        服务器控件 </ p >
     < p >
         < select  id ="Select1"  name ="D1" >
             < option ></ option >
         </ select > HTML控件 </ p >
     < p >
         &nbsp; </ p >
     </ form >
</ body >
</ html >

 

后台代码：

 

using  System;
using  System.Collections;
using  System.Configuration;
using  System.Data;
using  System.Linq;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.HtmlControls;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Xml.Linq;
using  System.Data.SqlClient;

namespace  WebApplication1
... {
    public partial class WebForm8 : System.Web.UI.Page
    ...{
           /**//*作者: WhirlWind(20080424)*/
    
        //public string d1str = string.Empty;//下拉框字符串，以","分隔
        protected void Page_Load(object sender, EventArgs e)
        ...{
            string connstr = ConfigurationManager.ConnectionStrings["TestConnectionString"].ToString();//连接字符串
            if (!IsPostBack)
            ...{
                drrlist1bind();
                drrlist2bind();
                drrlist3bind();

                //DropDownList4.Items.Add(new ListItem("1", "1"));

            }

            this.DropDownList3.Attributes.Add("onchange", "XmlPost(this);");//添加事件属性
            drr4bind();//异步绑定
        }
        //通过异步刷新绑定下拉框4
        private void drr4bind()
        ...{
            if (Request.QueryString["d3"] != null)
            ...{
                string s1 = Request.QueryString["d3"];
                SqlDataReader drr = SqlHelper.ExecuteReader(CommandType.Text, "select b from table_1 where c='" + s1 + "'", null);
                string d1str = "";
                while (drr.Read())
                ...{
                    d1str += "," + drr[0];
                }
                d1str = d1str.Substring(1);
                Response.Write(d1str);
                Response.End();


            }
        }
  绑定下拉框#region 绑定下拉框
        //绑定下拉框1
        private void drrlist1bind()
        ...{

            SqlDataReader dr = SqlHelper.ExecuteReader(CommandType.Text, "SELECT a FROM table_1", null);

            DropDownList1.DataSource = dr;
            DropDownList1.DataTextField = "a";
            DropDownList1.DataValueField = "a";
            DropDownList1.DataBind();
            dr.Close();
        }
        //绑定下拉框2
        private void drrlist2bind()
        ...{
            SqlDataReader dr2 = SqlHelper.ExecuteReader(CommandType.Text, "SELECT c FROM table_1", null);

            DropDownList2.DataSource = dr2;
            DropDownList2.DataTextField = "c";
            DropDownList2.DataValueField = "c";
            DropDownList2.DataBind();

            dr2.Close();//关闭DR
        }

        //绑定下拉框3
        private void drrlist3bind()
        ...{

            SqlDataReader dr = SqlHelper.ExecuteReader(CommandType.Text, "SELECT a FROM table_1", null);

            DropDownList3.DataSource = dr;
            DropDownList3.DataTextField = "a";
            DropDownList3.DataValueField = "a";
            DropDownList3.DataBind();
            dr.Close();
        }
         #endregion
        //选择事件
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        ...{
            string s1 = DropDownList1.SelectedValue;
            SqlDataReader dr = SqlHelper.ExecuteReader(CommandType.Text, "select b from table_1 where c='" + s1 + "'", null);
            DropDownList2.DataSource = dr;
            DropDownList2.DataTextField = "b";
            DropDownList2.DataValueField = "b";
            DropDownList2.DataBind();
            dr.Close();
        }
    }
}