javascript级联菜单,数据从数据库中获取

简介:
1
1 .html代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<%@ page contentType= "text/html; charset=gb2312"  %>
<%@ page  import = "java.sql.*"  %>
 
<html>
<head>
<!--
放置javascript代码
-->
</head>
 
<body style= "font-size: 12px;"  bgcolor= "eeeeee" >
<form name= "form1"  action= "SpecialityRelation_Insert.jsp"  method= "get" >
<img onclick= "history.go(-1);"  src= "../../images/back_blue.gif"  onmousemove= "this.src='../../images/back_red.gif';"  onmouseout= "this.src='../../images/back_blue.gif'"  style= "cursor:hand;" >
<hr>
 
<%
     String logicalclass_name = request.getParameter( "name" );
     String logicalclass_id = request.getParameter( "logicalclass_id" );
%>
 
<input name= "logicalclass_id"  value= "<%=logicalclass_id%>"  type= "hidden" >
<table border= "1px" >
<tr>
<td width= "100px" >教学班名称</td>
<td width= "300px" >
<input  class = "MyInputBox"  name= "name"  value= "<%=logicalclass_name%>"  style= "background:'#dddddd';"  size= "50"  readonly/>
</td>
</tr>
<tr>
<td>所在专业</td>
<td>
<select  class = "MySelect"  name= "department"  size= "1"  id= "department"  onChange= "changeDepartment(document.form1.department.options[document.form1.department.selectedIndex].value)" >
<%
     rs = myDao.execQuery( "select * from department" );
     i= 0 ;
     for (rs.next();!rs.isAfterLast();rs.next(),i++)
     {
%>
<option value= "<%=rs.getString(" id ")%>" ><%=rs.getString( "Department_name" )%></option>
<% 
     }
%>
</select>
 
<select  class = "MySelect"  name= "division"  size= "1"  id= "division"  onChange= "changeDivision(document.form1.division.options[document.form1.division.selectedIndex].value)" >
</select>
 
<input type= "hidden"  name= "Switch"  value= "false" >
 
<select  class = "MySelect"  name= "speciality"  id= "speciality"  size= "1"  onChange= "changeSpeciality(document.form1.speciality.options[document.form1.speciality.selectedIndex].value)" ></select>
 
<select  class = "MySelect"  name= "Grade"  id= "Grade"  size= "1"  onChange= "changeGrade(document.form1.Grade.options[document.form1.Grade.selectedIndex].value)" >
</select>
 
<select  class = "MySelect"  name= "ObjectID"  size= "1" >
</select>
 
</td>
</tr>
 
 
<tr>
<td>说明</td>
<td><textarea name= "other"  class = "MyTextArea"  name= "other"  cols= "48"  rows= "10" ></textarea></td>
</tr>
 
<tr>
<td colspan= "2"  align= "right" >
<img src= "../../images/submit_blue.gif"  onmousemove= "this.src='../../images/submit_red.gif';"  onmouseout= "this.src='../../images/submit_blue.gif'"  style= "cursor:hand;"  onclick= "document.form1.submit();"
</td>
</tr>
</table>
</form>
</body>
</html>

  

1
<br>

 2.javascript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
2 .javascript代码
<script language= "javascript" >
 
var DeparmentCount;  //三级联动菜单代码
DeparmentCount =  0 ;
var DivisionCount;
DivisionCount =  0 ;
var SpecialityCount;
SpecialityCount =  0 ;
 
//GradeCount = 0;
ObjectIDCount =  0 ;
Department =  new  Array();
Division =  new  Array();
Speciality =  new  Array();
//Grade = new Array();
ObjectID =  new  Array();
 
<%
system.pub.oraclesql myDao =  new  system.pub.oraclesql();
ResultSet rs = myDao.execQuery( "select * from division" );
int  i= 0 ;
for (rs.next();!rs.isAfterLast();rs.next(),i++)
{
%>
         
Division[<%=i%>] =  new  Array( "<%=rs.getString(" Division_name ")%>" , "<%=rs.getString(" department_id ")%>" , "<%=rs.getString(" id ")%>" );
 
<% 
} //for
%>
         
DivisionCount = <%=i%>;
<%
     System.out.println( "debug....1" );
     rs = myDao.execQuery( "select * from speciality" );
     i= 0 ;
     for (rs.next();!rs.isAfterLast();rs.next(),i++)
     {
%>
             
Speciality[<%=i%>] =  new  Array( "<%=rs.getString(" Speciality_name ")%>" , "<%=rs.getString(" division_id ")%>" , "<%=rs.getString(" id ")%>" );
 
<% 
} //for
%>
  SpecialityCount = <%=i%>;
         
<%
     rs = myDao.execQuery( "select distinct speciality_id,grade,object_id,name from student t,object o where o.id= t.object_id" );
     i= 0 ;
     for (rs.next();!rs.isAfterLast();rs.next(),i++)
     {
%>
 
  ObjectID[<%=i%>] =  new  Array( "<%=rs.getString(" speciality_id ")%>" , "<%=rs.getString(" grade ")%>" , "<%=rs.getString(" object_id ")%>" , "<%=rs.getString(" name ")%>" );
 
<% 
} //for
%>
             
     ObjectIDCount = <%=i%>;
         
         
         
         function changeDepartment(DepartmentId)
         {
             document.form1.Switch.value= "false" ;
             document.form1.division.length =  0 ;
             var DepartmentId = DepartmentId;
             var i;
             for  (i= 0 ;i < DivisionCount; i++)
             {
                 if  (Division[i][ 1 ] == DepartmentId)
                 {
                     document.form1.division.options[document.form1.division.length] =  new  Option(Division[i][ 0 ], Division[i][ 2 ]);
                 }       
             }
             changeDivision(document.form1.division.value);
             if (document.form1.division.length!= 0 )
             {
                 document.form1.division.style.visibility =  'visible' ;
             }
             else
             {
                 document.form1.division.style.visibility =  'hidden' ;
            
             
         }
         
         function changeDivision(DivisionId)
         {
             document.form1.Switch.value= "false" ;
             document.form1.speciality.length =  0 ;
             var DivisionId = DivisionId;
             var i;
             for  (i= 0 ;i < SpecialityCount; i++)
             {
                 if  (Speciality[i][ 1 ] == DivisionId)
                 {
                     document.form1.speciality.options[document.form1.speciality.length] =  new  Option(Speciality[i][ 0 ], Speciality[i][ 2 ]);
                 }       
             }
             if (document.form1.speciality.length!= 0 )
             {
                 document.form1.speciality.style.visibility =  'visible' ;
             }
             else
            
                 document.form1.speciality.style.visibility =  'hidden' ;
                 document.form1.Grade.style.visibility =  'hidden' ;
                 document.form1.ObjectID.style.visibility =  'hidden' ;
                 
             }
             changeSpeciality(document.form1.speciality.value);
         }
         
         function changeSpeciality(SpecialityID)
         {
             document.form1.Switch.value= "false" ;
             document.form1.Grade.length =  0 ;
             var SpecialityID = SpecialityID;
             var i,j;
             var flag =  0 ;
             for  (i= 0 ;i < ObjectIDCount; i++)
             {
                 if (ObjectID[i][ 0 ] == SpecialityID)
                 {
                     for (j= 0 ,flag= 0 ;j<document.form1.Grade.length;j++)
                     {
                         if (document.form1.Grade.options[j].value==ObjectID[i][ 1 ])
                         {
                             flag =  1 ;
                             break ;
                         }
                     }
                     if (flag!= 1 )
                     {
                         document.form1.Grade.options[document.form1.Grade.length] =  new  Option(ObjectID[i][ 1 ], ObjectID[i][ 1 ]);
                     }
                 }       
             }
             if (document.form1.Grade.length!= 0 )
             {
                 document.form1.Grade.style.visibility =  'visible' ;
             }
             else
            
                 document.form1.Grade.style.visibility =  'hidden' ;
                 document.form1.ObjectID.style.visibility = 'hidden' ;
             }
             changeGrade(document.form1.Grade.value);
         }
         
         function changeGrade(GradeID)
         {
             document.form1.Switch.value= "false" ;
             document.form1.ObjectID.length =  0 ;
             var GradeID = GradeID;
             var i;
             for  (i= 0 ;i < ObjectIDCount; i++)
             {
                 if (ObjectID[i][ 1 ] == GradeID && ObjectID[i][ 0 ] == document.form1.speciality.value)
                 {
                     document.form1.ObjectID.options[document.form1.ObjectID.length] =  new  Option(ObjectID[i][ 3 ],ObjectID[i][ 2 ]);
                 }       
             }
             if (document.form1.ObjectID.length!= 0 )
             {
                 document.form1.ObjectID.style.visibility =  'visible' ;
             }
             else
            
                 document.form1.ObjectID.style.visibility =  'hidden' ;
             }
         }
         
         
         function  initialSelect()
         {
             changeDepartment(document.form1.department.options[document.form1.department.selectedIndex].value);
         }
         
         
         </script>

  

 本文转自二郎三郎博客园博客,原文链接:http://www.cnblogs.com/haore147/p/3617944.html,如需转载请自行联系原作者

相关文章
|
3天前
|
存储 人工智能 Cloud Native
云栖重磅|从数据到智能:Data+AI驱动的云原生数据库
在9月20日2024云栖大会上,阿里云智能集团副总裁,数据库产品事业部负责人,ACM、CCF、IEEE会士(Fellow)李飞飞发表《从数据到智能:Data+AI驱动的云原生数据库》主题演讲。他表示,数据是生成式AI的核心资产,大模型时代的数据管理系统需具备多模处理和实时分析能力。阿里云瑶池将数据+AI全面融合,构建一站式多模数据管理平台,以数据驱动决策与创新,为用户提供像“搭积木”一样易用、好用、高可用的使用体验。
云栖重磅|从数据到智能:Data+AI驱动的云原生数据库
|
5天前
|
SQL 关系型数据库 数据库
国产数据实战之docker部署MyWebSQL数据库管理工具
【10月更文挑战第23天】国产数据实战之docker部署MyWebSQL数据库管理工具
28 3
国产数据实战之docker部署MyWebSQL数据库管理工具
|
2天前
|
关系型数据库 分布式数据库 数据库
云栖大会|从数据到决策:AI时代数据库如何实现高效数据管理?
在2024云栖大会「海量数据的高效存储与管理」专场,阿里云瑶池讲师团携手AMD、FunPlus、太美医疗科技、中石化、平安科技以及小赢科技、迅雷集团的资深技术专家深入分享了阿里云在OLTP方向的最新技术进展和行业最佳实践。
|
4天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
10天前
|
人工智能 Cloud Native 容灾
云数据库“再进化”,OB Cloud如何打造云时代的数据底座?
云数据库“再进化”,OB Cloud如何打造云时代的数据底座?
|
18天前
|
SQL 存储 关系型数据库
数据储存数据库管理系统(DBMS)
【10月更文挑战第11天】
63 3
|
23天前
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
30 7
|
23天前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
42 4
|
24天前
|
SQL 存储 关系型数据库
添加数据到数据库的SQL语句详解与实践技巧
在数据库管理中,添加数据是一个基本操作,它涉及到向表中插入新的记录
|
27天前
|
SQL 监控 数据处理
SQL数据库数据修改操作详解
数据库是现代信息系统的重要组成部分,其中SQL(StructuredQueryLanguage)是管理和处理数据库的重要工具之一。在日常的业务运营过程中,数据的准确性和及时性对企业来说至关重要,这就需要掌握如何在数据库中正确地进行数据修改操作。本文将详细介绍在SQL数据库中如何修改数据,帮助读者更好
126 4