三级连动菜单,要求在第三级上加按钮,可以查看所有设备.

三级菜单
<select name="bxdw" id="bxdw" onchange="check_select()">
 <option>请选择部门</option>
</select>

<select name="bxr" id="bxr" onchange="check_dm()">
  <option value="" >请选择员工</option>
 </selec>

<select name="bxsb" id="bxsb"> <option value="">请选择设备</option>
</select>
<input type="button"   onclick="Javascript:check_all();"> 全部设备 


怎么实现

6 个解决方案

#1

用asp＋javascript实现动态数据联动，不刷新

转贴：Andy.m   日期：2003-08-29   人气：56 
/////////////by xxrl(孔曰成仁，孟曰取E) 

/////////////Chinese:蒋健华 

/////////////email:[e-mail] 

联动，联动，联动。。。。困扰了好多网友的神经，在CSDN－ASP板块中，总是看到网友们大呼救命，救什么？联动！为什么联动这样受到关注，其实用性无可非议，用户也能认可，可是如果数据是大量并相互关联的，那问题就来了，怎么识别并显示是一个很苦恼的问题。那究竟有没有一个很好的解决办法呢？答案是肯定的，因为我们有asp和javascript，哈哈，那么我们就开始行动吧！ 

我们要获得的数据，既然要达到联动的效果，肯定这些数据是有关联的，那么我们用这样的实例来说明我们的方法 

准备条件： 

SQL SERVER 2000 中文企业版，IIS5.0+，IE5.0+，当然，最好有一个好的编辑器，VS.NET就不错，当然，如果你是记事本的拥护者，那我也没办法。L 

我们以人事管理中的部门级别进行联动方法的说明，认识管理中的部门级别可以这样定义，也是实际企业的定义规则，**化工厂/**系统/**部，举例说明就是 

××化工厂/营销系统/市场部，在文中，FirstOrganization表对应的是”××化工厂”，SecondOrganization对应的是”营销系统”，ThirdOrganization对应的是”市场部” 



在SQL SERVER 2000中新建两个表，或者三个表，为了我们能更大限度的发挥联动的功能，我们建三个表，呵呵。 

数据库名称：xxrl_STUDY，用户名xxrl_STUDY,密码xxrl_STUDY 

接着建ODBC数据源，你也可以不用，但我这样用，呵呵 

ODBC名：xxrl_ ODBC,用用户名xxrl_STUDY，密码xxrl_STUDY连接，指向xxrl_STUDY数据库，默认中文设置，测试――>ok 

新建表： 

第一个表FirstOrganization 

SQL脚本如下： 

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[FirstOrganization]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) 

drop table [dbo].[FirstOrganization] 

GO 



CREATE TABLE [dbo].[FirstOrganization] ( 

[id] [int] IDENTITY (1, 1) NOT NULL , 

[OrganizationName] [varchar] (100) COLLATE Chinese_PRC_CI_AS NOT NULL , 

[Description] [varchar] (8000) COLLATE Chinese_PRC_CI_AS NULL 

) ON [PRIMARY] 

GO 

第二个表SecondOrganization 

SQL脚本如下： 

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[SecondOrganization]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) 

drop table [dbo].[SecondOrganization] 

GO 



CREATE TABLE [dbo].[SecondOrganization] ( 

[id] [int] IDENTITY (1, 1) NOT NULL , 

[parentID] [int] NOT NULL , 

[OrganizationName] [varchar] (100) COLLATE Chinese_PRC_CI_AS NOT NULL , 

[Description] [varchar] (8000) COLLATE Chinese_PRC_CI_AS NULL , 

[OrderNumber] [int] NULL 

) ON [PRIMARY] 

GO 



第三个表ThirdOrganization 

SQL脚本如下： 

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[ThirdOrganization]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) 

drop table [dbo].[ThirdOrganization] 

GO 



CREATE TABLE [dbo].[ThirdOrganization] ( 

[id] [int] IDENTITY (1, 1) NOT NULL , 

[parentID] [int] NOT NULL , 

[OrganizationName] [varchar] (100) COLLATE Chinese_PRC_CI_AS NOT NULL , 

[Description] [varchar] (8000) COLLATE Chinese_PRC_CI_AS NULL , 

[OrderNumber] [int] NULL 

) ON [PRIMARY] 

GO 



Ok，ODBC，我们建好了，数据库也建好了，至于站点的配置，我想大家都应该知道的，这里不再陈述。这里我的站点IP是http://200.100.100.88 （内部网络IP） 

终于开始写程序喽，好累，噗哧，噗哧，刚帮我同事搬东西，歇一会儿，coffee-ing………. 

好的，为了方便IIS他老人家，我们也懒得敲多余的字母，我们是聪明的，不勤劳的程序员，本来程序员就已经够累的了，还不方便我们自己？嘿嘿，赞同者鼓掌，啪啪啪啪，faint，哪来的鞭炮？啥家的小孩也不好好管管。。。。。。。。。J 

新建default.asp文件，我们在写如下程序， 

建立数据库连接对象， 

set objconn=server.CreateObject("adodb.connection") 

objconn.Open " xxrl_ ODBC ","xxrl_STUDY","xxrl_STUDY" 

然后打开我们要进行操作的3个数据集 

dim sql1,sql2,sql3 

sql1="select * from FirstOrganization" 

sql2 = "select * from SecondOrganization" 

sql3 = "select * from ThirdOrganization" 

‘/////////////////////////打开第一组织库 

set rs1=server.CreateObject("adodb.recordset") 

rs1.Open sql1,objconn,1,1 



set rs2=server.CreateObject("adodb.recordset") 

rs2.Open sql2,objconn,1,1 



set rs3=server.CreateObject("adodb.recordset") 

rs3.Open sql3,objconn,1,1

#2

建一个SELECT类型的HTTP控件，包含在form表单中如下： 

‘////////////////////控件的初始值是从FirstOrganization中读取的，FirstOrganization在本例子中只有一个数据就是××化工厂代码如下： 

<form name=form1 style="margin:0;" method="post"> 

<select name=FirstOrganization> 

<% 

if rs1.RecordCount >0 then 

Response.Write"<option value="&rs1(“id”)&”>”&rs1("OrganizationName")&"</option>" 

Else 

Response.Write "没有配置" 

end if 

%> 

</select> 

</form> 

好，这就是我们的联动功能的头 

下面我们要建立第二个select控件了，第二个select控件中，我们用到了onchange函数，关于这个函数的详细解释，请看MSDN。代码如下(包含在form中)： 

<select name=SecondOrganization onchange=”ChangeLocationi(form1.SecondOrganization.options[form1.SecondOrganization.selectedIndex].value);”> 

<option value=””>-------------</option> 

<% 

if rs2.RecordCount<0 then 

response.write “<option value=””””>库中没有部门！</option>” 

else 

while not rs2.eof 

response.write “<option value=”&rs2(“id”)&”>” &rs2(“OrganizationName”)&”</option>” 

rs2.movenext 

wend 

end if 

%> 

</select> 

OK,第二个也搞定，下面我们来建立第三个SELECT 同样放在form表单里，如下： 

<select name=ThirdOrganization> 

</select> 

不要忘记关数据集噢， 

rs1.close 

set rs1 = nothing 

rs2.close 

set rs2 = nothing 

rs3.close 

set rs3 = nothing 

ok，页面元素全部准备就绪，下面开始我们真正的联动之旅。 

本例子采用ASP和JAVASCRIPT交互的方法取数据库中的数据，由于我们在form表单前我们新建script脚本快，由于要交互，所以我们要这么写才能很好的交互 

<%=”<script language=javascript>”%> 

</script> 

然后我们就可以在script块中书写我们的程序了。 

我们的基本操作是根据二级下拉中得出三级下拉，二级我们都从数据库中取出来了，下面我们要取三级组织的数据了，如下 

<%=”<script language=javascript>”%> 

<%’asp块 

dim sql_GetThirdOrganization 

sql_GetThirdOrganization = "select * from ThirdOrganization order by id desc" 

set rs_GetThirdOrganization = server.CreateObject("adodb.recordset") rs_GetThirdOrganization.Open sql_GetThirdOrganization,objconn,1,1 

%> 

var temp,temp_2;//////////////javascript块 

temp=0;///////////////////for循环变量初始化 

Related = new Array();//////////////////////数组，用来存放三级组织的id，名称，和对应的父ID 

<% 

temp_2 = 0 ‘一个临时变量，用来存放三级组织的个数 

while not rs_GetThirdOrganization.eof ‘循环第三级组织 

%> 

////////////三维分别对应的第三级组织的ID，第三级组织的名称 

////////////第三级别组织的父ID（即第二级别ID） 

Related[<%=temp_2%>] = new Array("<%=rs_GetThirdOrganization(“id”)%>","<%=rs_GetThirdOrganization(“OrganizationName”)%>","<%=rs_GetThirdOrganization(“parentID”)%>"); 

<% 

temp_2 = temp_2 + 1 

rs_GetThirdOrganization.movenext 

wend 

%> 

temp = <%=temp_2%>; 

function ChangeLocation(id){ //// 

var id = id; 接受二级菜单的选择的item的索引值 

document.form1.ThirdOrganization.length=0; //初始化第三级菜单的长度，下标从0开始 

var i = 0; 

/////////////////初始化第三级菜单的text和value属性的值，第一个参数值是text ”--------”,二是////////value 空值 

document.form1.ThirdOrganization.options[0]=new Option('-------',''); 

////////////循环数组，用数组的第三维数（父ID）和函数传过来的数进行比较 

for(i=0;i< temp;i++){ 

if(Related[i][2]==id){ /////////如果相等，证明在第三级里面有输入第二级组织的子集 

///////////////////并将子集（第三级）的值赋给第三个select， 

document.form1.ThirdOrganization.options[document.form1.ThirdOrganization.length] = new Option(Related[i][1], Related[i][0]); 

} 

} 

} 

</script> 

最后在页面的最后可不要忘了添加objconn.close噢，呵呵 

上面介绍的东西，主要是根据选择第二个select来联动第三个select,那么如果我们在第三个select控件处这样再定义一个函数如下： 

<select name=ThirdOrganization onchange=”fnChangeAgain(form1.ThirdOrganization.options[form1.ThirdOrganization.selectedIndex].value)”> 

</select> 

这样，再在script块中再写一个同样的函数，函数内容同ChangeLocation函数，是不是实现了三级联动，那么依此类推，呵呵，10级别联动都可以做，只不过麻烦而已，当然，你也可以用其他的方法，或者用一个表来对应算法，这随便你，我这例子也是从我实际开发中得来的一点经验积累，主要是为了思路清晰，为不懂程序的人好维护，所以将组织分开，因为鄙人从不维护，嘿嘿。 

夏天要过去了，呵呵，祝大家安康！祝未来的中秋佳节开心，我又要一个人在外地过喽。 

xxrl(孔曰成仁，孟曰取E) 

2003-8-26

#3

谢谢 mengfan8868(周文慧),我最需要的是点查看所有设备的按钮实现功能了

#4

用SQL命令建库好爽喔我要继续努力才行。

#5

呵呵
感谢mengfan8868(周文慧)对鄙人文章的引用
点“查看所有设备的按钮”的功能其实还是要求联动，之后点击此按钮，在执行相应的处理表单，但菜单联动是为了能够书写SQL语句，

#6

谢谢 xxrl(孔曰成仁，孟曰取E) 的指点.