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

最新推荐文章于 2022-02-03 12:06:40 发布
mengyao
最新推荐文章于 2022-02-03 12:06:40 发布
阅读量5.9k
点赞数
分类专栏： DotNet集中营 SQL Sql Server/Oracle超强训练营文章标签： asp.net webform xmlhttprequest string button 数据库
本文链接：https://blog.csdn.net/mengyao/article/details/644789
版权
DotNet集中营同时被 2 个专栏收录
215 篇文章 1 订阅
订阅专栏
SQL Sql Server/Oracle超强训练营
71 篇文章 0 订阅
订阅专栏
可能"极好的"又会带来很多的非议,但是我认为这确实很好,我看了大约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 οnchange="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( ) );
        }
    }
}
数据表:主键id
parent_id( int )
type_value( int )
type_text( var
char )
int递增
   父下拉框的value值
        下拉框的value
        下拉框的text