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,如需转载请自行联系原作者

相关文章
|
1月前
|
存储 人工智能 Cloud Native
云栖重磅|从数据到智能:Data+AI驱动的云原生数据库
在9月20日2024云栖大会上,阿里云智能集团副总裁,数据库产品事业部负责人,ACM、CCF、IEEE会士(Fellow)李飞飞发表《从数据到智能:Data+AI驱动的云原生数据库》主题演讲。他表示,数据是生成式AI的核心资产,大模型时代的数据管理系统需具备多模处理和实时分析能力。阿里云瑶池将数据+AI全面融合,构建一站式多模数据管理平台,以数据驱动决策与创新,为用户提供像“搭积木”一样易用、好用、高可用的使用体验。
云栖重磅|从数据到智能:Data+AI驱动的云原生数据库
|
27天前
|
存储 监控 数据处理
flink 向doris 数据库写入数据时出现背压如何排查?
本文介绍了如何确定和解决Flink任务向Doris数据库写入数据时遇到的背压问题。首先通过Flink Web UI和性能指标监控识别背压,然后从Doris数据库性能、网络连接稳定性、Flink任务数据处理逻辑及资源配置等方面排查原因,并通过分析相关日志进一步定位问题。
157 61
|
1月前
|
SQL 关系型数据库 数据库
国产数据实战之docker部署MyWebSQL数据库管理工具
【10月更文挑战第23天】国产数据实战之docker部署MyWebSQL数据库管理工具
137 4
国产数据实战之docker部署MyWebSQL数据库管理工具
|
25天前
|
关系型数据库 MySQL 数据库
GBase 数据库如何像MYSQL一样存放多行数据
GBase 数据库如何像MYSQL一样存放多行数据
|
1月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
1月前
|
关系型数据库 分布式数据库 数据库
云栖大会|从数据到决策:AI时代数据库如何实现高效数据管理?
在2024云栖大会「海量数据的高效存储与管理」专场,阿里云瑶池讲师团携手AMD、FunPlus、太美医疗科技、中石化、平安科技以及小赢科技、迅雷集团的资深技术专家深入分享了阿里云在OLTP方向的最新技术进展和行业最佳实践。
|
23天前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
1月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
2月前
|
人工智能 Cloud Native 容灾
云数据库“再进化”,OB Cloud如何打造云时代的数据底座?
云数据库“再进化”,OB Cloud如何打造云时代的数据底座?
|
2月前
|
SQL 存储 关系型数据库
数据储存数据库管理系统(DBMS)
【10月更文挑战第11天】
139 3
下一篇
DataWorks