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

相关文章导航

先建立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

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

using Microsoft.ApplicationBlocks.Data;
15

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

protected System.Web.UI.WebControls.Label msgLabel;
24

protected System.Web.UI.WebControls.Button Buttonok;
25

readonly string conString="uid=sa;pwd=123;database=TestDataBase";
27

private void Page_Load(object sender, System.EventArgs e)
29

{
30

regJS();
31

Bind();
32

}
33

private void regJS()
35

{
36

SqlDataReader rs=this.GetchildData();
37

StringBuilder sb=new StringBuilder(1000);
38

sb.Append("<Script Language=JavaScript>");
40

sb.Append(Environment.NewLine);
41

sb.Append("arr=new Array();");
43

sb.Append(Environment.NewLine);
44

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

if ( !rs.IsClosed )
54

{
55

rs.Close();
56

}
57

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

if( !Page.IsClientScriptBlockRegistered("jsScript"))
88

{
89

this.RegisterClientScriptBlock("jsScript",sb.ToString());
90

}
91

}
92

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

this.DropDownList_child.DataValueField="childId";
105

this.DropDownList_child.DataBind();
106

}
107

108

/// <summary>
109

/// 得到子表数据
110

/// </summary>
111

/// <returns></returns>
112

SqlDataReader GetchildData()
113

{
114

return SqlHelper.ExecuteReader(conString,CommandType.StoredProcedure,"proc_GetchildData");
115

}
116

117

/// <summary>
118

/// 由父id得到子表数据
119

/// </summary>
120

/// <param name="parentId"></param>
121

/// <returns></returns>
122

SqlDataReader GetchildData(int parentId)
123

{
124

SqlParameter[] sqlParameter={new SqlParameter("@parentId",SqlDbType.Int)};
125

sqlParameter[0].Value=parentId;
126

return SqlHelper.ExecuteReader(conString,CommandType.StoredProcedure,"proc_GetchildDataBYparentId",sqlParameter);
127

}
128

129

Web 窗体设计器生成的代码
150

151

private void Buttonok_Click(object sender, System.EventArgs e)
152

{
153

this.msgLabel.Text = String.Format("选择的父数值={0},选择的子数值={1}", Request.Form.Get("DropDownList_parent"),Request.Form.Get("DropDownList_child"));
154

}
155

}
156

}
157

说明:我在代码中用到了微软的数据访问块,按钮单击事件中请用Request.Form.Get方法取到下拉列表的数值

收藏与分享

收藏到QQ书签添加到百度搜藏添加到雅虎收藏

RSS订阅我 什么是RSS?

东莞.net俱乐部

东莞.net俱乐部欢迎您的加入

posted @ 2005-10-20 17:30 aierong 阅读(5568) 评论(3) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

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

公告