ASP.NET无刷新二级联动下拉列表

来源：互联网发布：apache ab下载编辑：程序博客网时间：2024/05/16 01:09
可能"极好的"又会带来很多的非议,但是我认为这确实很好,我看了大约20个无刷新的连动下拉列表,他们在firefox下面就一团糟.为了这个我差不多搞了两天,就是如果提交窗体后如何保持第二个列表框的值,因为通过js 给下拉框添加条目那么他的状态是不会被保存的测试平台:ie6,firefox功能:二级无刷新连动特点:跨浏览器;提交窗体取第二下拉框的值;数据来源于数据库;以xmlhttp来发送请求,实现无刷新请求:如果您能够找到更好的方法请告诉我,非常感谢,您的批评和建议对我是莫大的鼓励webform1.aspx:<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="drop.WebForm1" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><HTML> <HEAD>  <title>WebForm1</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">//jb函数会根据不同的浏览器初始化个xmlhttp对象function jb( ){    var A=null;    try    {        A=new ActiveXObject( "Msxml2.XMLHTTP" );    }    catch( e )    {        try        {            A=new ActiveXObject( "Microsoft.XMLHTTP" );        }        catch( oc )        {            A=null        }    }    if (!A && typeof XMLHttpRequest != "undefined")    {        A=new XMLHttpRequest( )    }    return A}//下面Go函数是父列表框改变的时候调用,参数是选择的条目function Go( obj ){    //得到选择框的下拉列表的value    var svalue = obj.value;    //定义要处理数据的页面    var weburl = "webform1.aspx?parent_id="+svalue;    //初始化个xmlhttp对象    var xmlhttp = jb( );    //提交数据,第一个参数最好为get,第三个参数最好为true    xmlhttp.open( "get",weburl,true );    // alert( xmlhttp.responseText );    //如果已经成功的返回了数据    xmlhttp.onreadystatechange=function( )    {        if( xmlhttp.readyState==4 )//4代表成功返回数据        {            var result = xmlhttp.responseText;            //得到服务器返回的数据            //先清空dListChild的所有下拉项            document.getElementById( "dListChild" ).length = 0;            //给dListChild加个全部型号的,注意是Option不是option            document.getElementById( "dListChild" ).options.add( new Option( "全部型号","0" ) );            if( result!="" )//如果返回的数据不是空            {                //把收到的字符串按照,分割成数组                var allArray = result.split( "," );                //循环这个数组,注意是从1开始,因为收到的字符串第一个字符是,号,所以分割后第一个数组为空                for( var i=1;                i<allArray.length;                i++ )                {                    //在把这个字符串按照|分割成数组                    var                     thisArray = allArray[i].split( "|" );                    //为dListChild添加条目                    document.getElementById( "dListChild" ).options.add( new Option( thisArray[1].toString( ),                    thisArray[0].toString( ) ) );                }            }        }    }    //发送数据,请注意顺序和参数,参数一定为null或者""    xmlhttp.send( null );}</script> </HEAD> <body MS_POSITIONING="GridLayout">  <form id="Form1" method="post" runat="server"><asp:DropDownList onchange="Go( this )" id="dListParent" style="Z-INDEX: 101;LEFT: 248px;POSITION: absolute;TOP: 40px"runat="server"><asp:ListItem Value="100">摩托罗拉</asp:ListItem><asp:ListItem Value="101">诺基亚</asp:ListItem></asp:DropDownList><asp:DropDownList id="dListChild" style="Z-INDEX: 102;LEFT: 248px;POSITION: absolute;TOP: 104px"runat="server"></asp:DropDownList><asp:Button id="Button1" style="Z-INDEX: 103;LEFT: 256px;POSITION: absolute;TOP: 176px" runat="server"Text="Button"></asp:Button>  </form> </body></HTML>后台webform1.aspx.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;using System.Configuration;using System.Data.SqlClient;namespace drop{    /// <summary>     /// WebForm1 的摘要说明.     /// </summary>     public class WebForm1 : System.Web.UI.Page     {        protected System.Web.UI.WebControls.DropDownList dListParent;                protected System.Web.UI.WebControls.Button Button1;                protected System.Web.UI.WebControls.DropDownList dListChild;                private void Page_Load( object sender, System.EventArgs e )          {            // 在此处放置用户代码以初始化页面            //if( !IsPostBack )            //            {                BindDrop( );                //如果不是提交回来就绑定列表框                //            }        }                protected void BindDrop( )          {            //首先我想父dropdownlist也绑定数据库,后面想没必要            //if( !IsPostBack )            //            {                //绑定父dListParent                // BindParent( );                //            }            //获得传递过来的parent_id值,如果是第一次请求他为null            string str = Request.QueryString["parent_id"];                        string str1 = dListParent.SelectedValue;            ;            Response.Write( str1 );            //如果str加个字符串!=原来的字符串则说明触发过dListParent的onchange事件            if( ( str+"abc" )!="abc" )            {                //绑定 dListChild控件                BindChild( str );                //把传来的父DropDownList的value做为参数            }            else            BindParent( str1 );        }                protected void BindParent( string str )          {            //如果是第一次请求或者是刷新这个页面则根据dListParent的值来选择            //把参数转化成            int            int i = Convert.ToInt32( str );            dListChild.Items.Clear( );            dListChild.Items.Add( new ListItem( "全部型号","0" ) );            //得到数据库连接字符串            string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString( );            //初始化个conn对象            SqlConnection conn = new SqlConnection( connStr );            //数据库语句            string commStr = string.Format( "select type_value,type_text from phone_type where parent_id={0}",i );            //建立数据库命令对象            SqlCommand comm = new SqlCommand( commStr,conn );            //打开数据库            conn.Open( );            //执行命令            SqlDataReader dr = comm.ExecuteReader( );            //循环dr,给dListParent添加条目            while( dr.Read( ) )            {                dListChild.Items.Add( new ListItem( dr[1].ToString( ),dr[0].ToString( ) ) );                //也可以这样                //dListParent.Items.Add( new ListItem( dr["phone_text"].ToString( ),dr["phone_value"].ToString( ) ) );            }            dListParent.Items[0].Selected = true;            //添加下面这话的意思是当点提交按钮提交窗体的时候第二个dListChild的状态能够得到保存            dListChild.SelectedValue = Request.Form["dListChild"];            dr.Close( );            conn.Close( );        }                protected void BindChild( string str )          {            //通过js给包括dropdownlist任何控件添加的内容不会被保存状态            //把参数转化成            int            int i = Convert.ToInt32( str );            //定义个字符串用保存从数据库返回的数据            string result = "";            //先清空输出的东西            Response.Clear( );                        string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString( );            SqlConnection conn = new SqlConnection( connStr );            SqlCommand comm = conn.CreateCommand( );                        string commStr = string.Format( "select type_value,type_text from phone_type where parent_id = {0}",i );            comm.CommandText = commStr;            conn.Open( );            SqlDataReader dr = comm.ExecuteReader( );            while( dr.Read( ) )            {                result += ","+dr[0].ToString( ) +"|" + dr[1].ToString( );                //dListChild.Items.Add( new ListItem( dr[1].ToString( ),dr[0].ToString( ) ) );            }            //把从数据库得到的信息输出到客户端            Response.Write( result );            //输出完成关闭Response,以免造成不必要的输出            Response.Flush( );            Response.Close( );            dr.Close( );            conn.Close( );        }        #region Web 窗体设计器生成的代码  override         protected void OnInit( EventArgs e )          {            //            // CODEGEN: 该调用是 asp.NET Web 窗体设计器所必需的.            //            InitializeComponent( );            base.OnInit( e );        }                /// <summary>          /// 设计器支持所需的方法 - 不要使用代码编辑器修改          /// 此方法的内容.          /// </summary>          private void         InitializeComponent( )          {            this.Button1.Click += new System.EventHandler( this.Button1_Click );                        this.Load += new System.EventHandler( this.Page_Load );        }        #endregion        private void Button1_Click( object sender, System.EventArgs e )          {            Response.Write( Request.Form["dListChild"].ToString( ) );        }    }}数据表:主键idparent_id( int )type_value( int )type_text( varchar )int递增   父下拉框的value值        下拉框的value        下拉框的text