实现无刷新闪烁二级联动下拉菜单

先建立2个表

-- 父表
create   table  tb_parent(
-- 主键
ids  int   constraint  pk_tb_parent_ids  primary   key ,
parentName  nvarchar ( 1000 )
)
go

insert   into  tb_parent
     select   1 , ' aaa '
     union   all
     select   2 , ' bbb '
     union   all
     select   3 , ' ccc '
go

 

-- 子表
create   table  tb_child(
parentId  int   ,
childId  int  ,
childName  nvarchar  ( 1000 ),
-- parentId外键
constraint  fk_tb_child_tb_parent_parentId 
     FOREIGN   KEY  (parentId)     
         REFERENCES  tb_parent(ids)
)
go


insert   into  tb_child
     select   1 , 101 , ' a_1 '
     union   all
     select   1 , 102 , ' a_2 '
go
insert   into  tb_child
     select   2 , 201 , ' b_1 '
     union   all
     select   2 , 202 , ' b_2 '
go
insert   into  tb_child
     select   3 , 301 , ' c_1 '
     union   all
     select   3 , 302 , ' c_2 '
     union   all
     select   3 , 303 , ' c_3 '
go

再创建3个过程

-- 得到父表数据
create   proc  proc_GetparentData
as
SELECT   [ ids ] ,  [ parentName ]  
     FROM   [ tb_parent ]
go


-- 得到子表数据
create   proc  proc_GetchildData
as
SELECT   [ parentId ] ,  [ childId ] ,  [ childName ]  
     FROM   [ tb_child ]
go

-- 由父id得到子表数据
create   proc  proc_GetchildDataBYparentId
@parentId   int
as
SELECT   [ parentId ] ,  [ childId ] ,  [ childName ]  
     FROM   [ tb_child ]
     where  parentId = @parentId
go

WebForm5.aspx

 1  <% @ Page language = " c# "  Codebehind = " WebForm5.aspx.cs "  AutoEventWireup = " false "  Inherits = " webtest.WebForm5 "   %>
 2  <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
 3  < HTML >
 4       < HEAD >
 5           < title > WebForm5 </ title >
 6           < meta  content ="Microsoft Visual Studio .NET 7.1"  name ="GENERATOR" >
 7           < meta  content ="C#"  name ="CODE_LANGUAGE" >
 8           < meta  content ="JavaScript"  name ="vs_defaultClientScript" >
 9           < meta  content ="http://schemas.microsoft.com/intellisense/ie5"  name ="vs_targetSchema" >
10       </ HEAD >
11       < body  MS_POSITIONING ="GridLayout" >
12           < form  id ="Form1"  method ="post"  runat ="server" >
13              父: < asp:dropdownlist  id ="DropDownList_parent"  runat ="server"  onChange ="changevalue(document.Form1.DropDownList_parent.options[document.Form1.DropDownList_parent.selectedIndex].value)"
14                  Width ="272px" ></ asp:dropdownlist >
15               < br >
16              子: < asp:dropdownlist  id ="DropDownList_child"  runat ="server"  Width ="272px" ></ asp:dropdownlist >
17               < br >
18               < asp:label  id ="msgLabel"  runat ="server"  Width ="416px" ></ asp:label >
19               < br >
20               < asp:Button  id ="Buttonok"  runat ="server"  Text ="click" ></ asp:Button ></ form >
21       </ body >
22  </ HTML >

WebForm5.aspx.cs

  1 using  System;
  2 using  System.Collections;
  3 using  System.ComponentModel;
  4 using  System.Data;
  5 using  System.Data.SqlClient;
  6 using  System.Drawing;
  7 using  System.Web;
  8 using  System.Web.SessionState;
  9 using  System.Web.UI;
 10 using  System.Web.UI.WebControls;
 11 using  System.Web.UI.HtmlControls;
 12 using  System.Text;
 13
 14 using  Microsoft.ApplicationBlocks.Data;
 15
 16 namespace  webtest
 17 {
 18    public class WebForm5 : System.Web.UI.Page
 19    {
 20        protected System.Web.UI.WebControls.DropDownList DropDownList_parent;
 21        protected System.Web.UI.WebControls.DropDownList DropDownList_child;
 22        
 23        protected System.Web.UI.WebControls.Label msgLabel;
 24        protected System.Web.UI.WebControls.Button Buttonok;
 25
 26        readonly string conString="uid=sa;pwd=123;database=TestDataBase";
 27    
 28        private void Page_Load(object sender, System.EventArgs e)
 29        {    
 30                regJS();
 31                Bind();
 32        }
 33
 34        private void regJS()
 35        {
 36            SqlDataReader rs=this.GetchildData();
 37            StringBuilder sb=new StringBuilder(1000);
 38
 39            sb.Append("<Script Language=JavaScript>");
 40            sb.Append(Environment.NewLine);
 41            
 42            sb.Append("arr=new Array();");
 43            sb.Append(Environment.NewLine);
 44            
 45            int i=0;
 46            while(rs.Read())
 47            {
 48                sb.AppendFormat("arr[{0}]=new Array('{1}','{2}','{3}')",i,rs["parentId"],rs["childId"],rs["childName"]);
 49                sb.Append(Environment.NewLine);
 50                i=i+1;
 51            }
 52            
 53            if ( !rs.IsClosed )
 54            {
 55                rs.Close();
 56            }
 57
 58            sb.Append(Environment.NewLine);
 59            sb.AppendFormat("var counts={0}",i);
 60            sb.Append(Environment.NewLine);
 61            sb.Append("function changevalue(parentId)");
 62            sb.Append(Environment.NewLine);
 63            sb.Append("{");
 64            sb.Append(Environment.NewLine);
 65            sb.Append("document.Form1.DropDownList_child.length = 0;");
 66            sb.Append(Environment.NewLine);
 67            sb.Append("var i;");
 68            sb.Append(Environment.NewLine);
 69            sb.Append("for(i=0; i<counts; i++)");
 70            sb.Append(Environment.NewLine);
 71            sb.Append("{");
 72            sb.Append(Environment.NewLine);
 73            sb.Append("if(arr[i][0]==parentId)");
 74            sb.Append(Environment.NewLine);
 75            sb.Append("{");
 76            sb.Append(Environment.NewLine);
 77            sb.Append("document.Form1.DropDownList_child.options[document.Form1.DropDownList_child.length]=new Option(arr[i][2],arr[i][1]);");
 78            sb.Append(Environment.NewLine);
 79            sb.Append("}");
 80            sb.Append(Environment.NewLine);
 81            sb.Append("}");
 82            sb.Append(Environment.NewLine);
 83            sb.Append("}");
 84            sb.Append(Environment.NewLine);
 85            sb.Append("</script>");            
 86                        
 87            if( !Page.IsClientScriptBlockRegistered("jsScript"))            
 88            {
 89                this.RegisterClientScriptBlock("jsScript",sb.ToString());
 90            }
 91        }
 92
 93        void Bind()
 94        {
 95            //获得父表
 96            this.DropDownList_parent.DataSource=SqlHelper.ExecuteReader(conString,CommandType.StoredProcedure,"proc_GetparentData");
 97            this.DropDownList_parent.DataTextField="parentName";
 98            this.DropDownList_parent.DataValueField="ids";
 99            this.DropDownList_parent.DataBind();
100
101            //根据父表id得子表
102            this.DropDownList_child.DataSource=GetchildData(Convert.ToInt32(this.DropDownList_parent.SelectedValue));
103            this.DropDownList_child.DataTextField="childName";
104