实现无刷新闪烁二级联动下拉菜单(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