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

相关文章
|
2月前
|
存储 JSON 关系型数据库
【干货满满】解密 API 数据解析:从 JSON 到数据库存储的完整流程
本文详解电商API开发中JSON数据解析与数据库存储的全流程,涵盖数据提取、清洗、转换及优化策略,结合Python实战代码与主流数据库方案,助开发者构建高效、可靠的数据处理管道。
|
29天前
|
存储 数据管理 数据库
数据字典是什么?和数据库、数据仓库有什么关系?
在数据处理中,你是否常困惑于字段含义、指标计算或数据来源?数据字典正是解答这些问题的关键工具,它清晰定义数据的名称、类型、来源、计算方式等,服务于开发者、分析师和数据管理者。本文详解数据字典的定义、组成及其与数据库、数据仓库的关系,助你夯实数据基础。
数据字典是什么?和数据库、数据仓库有什么关系?
|
5月前
|
存储 缓存 数据库
数据库数据删除策略:硬删除vs软删除的最佳实践指南
在项目开发中,“删除”操作常见但方式多样,主要分为硬删除与软删除。硬删除直接从数据库移除数据,操作简单、高效,但不可恢复;适用于临时或敏感数据。软删除通过标记字段保留数据,支持恢复和审计,但增加查询复杂度与数据量;适合需追踪历史或可恢复的场景。两者各有优劣,实际开发中常结合使用以满足不同需求。
399 4
|
1月前
|
存储 关系型数据库 数据库
【赵渝强老师】PostgreSQL数据库的WAL日志与数据写入的过程
PostgreSQL中的WAL(预写日志)是保证数据完整性的关键技术。在数据修改前,系统会先将日志写入WAL,确保宕机时可通过日志恢复数据。它减少了磁盘I/O,提升了性能,并支持手动切换日志文件。WAL文件默认存储在pg_wal目录下,采用16进制命名规则。此外,PostgreSQL提供pg_waldump工具解析日志内容。
134 0
|
4月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
828 58
|
3月前
|
存储 SQL Java
数据存储使用文件还是数据库,哪个更合适?
数据库和文件系统各有优劣:数据库读写性能较低、结构 rigid,但具备计算能力和数据一致性保障;文件系统灵活易管理、读写高效,但缺乏计算能力且无法保证一致性。针对仅需高效存储与灵活管理的场景,文件系统更优,但其计算短板可通过开源工具 SPL(Structured Process Language)弥补。SPL 提供独立计算语法及高性能文件格式(如集文件、组表),支持复杂计算与多源混合查询,甚至可替代数据仓库。此外,SPL 易集成、支持热切换,大幅提升开发运维效率,是后数据库时代文件存储的理想补充方案。
|
6月前
|
数据库 Python
【YashanDB知识库】python驱动查询gbk字符集崖山数据库CLOB字段,数据被驱动截断
【YashanDB知识库】python驱动查询gbk字符集崖山数据库CLOB字段,数据被驱动截断
|
5月前
|
人工智能 关系型数据库 分布式数据库
让数据与AI贴得更近,阿里云瑶池数据库系列产品焕新升级
4月9日阿里云AI势能大会上,阿里云瑶池数据库发布重磅新品及一系列产品能力升级。「推理加速服务」Tair KVCache全新上线,实现KVCache动态分层存储,显著提高内存资源利用率,为大模型推理降本提速。
|
6月前
|
SQL Java 数据库连接
【YashanDB数据库】由于网络带宽不足导致的jdbc向yashandb插入数据慢
由于网络带宽不足导致的jdbc向yashandb插入数据慢