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

相关文章
|
16天前
|
关系型数据库 MySQL 数据库
ORM对mysql数据库中数据进行操作报错解决
ORM对mysql数据库中数据进行操作报错解决
50 2
|
15天前
|
JavaScript Java 关系型数据库
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
本文介绍了一个基于Spring Boot和Vue.js实现的在线考试系统。随着在线教育的发展,在线考试系统的重要性日益凸显。该系统不仅能提高教学效率,减轻教师负担,还为学生提供了灵活便捷的考试方式。技术栈包括Spring Boot、Vue.js、Element-UI等,支持多种角色登录,具备考试管理、题库管理、成绩查询等功能。系统采用前后端分离架构,具备高性能和扩展性,未来可进一步优化并引入AI技术提升智能化水平。
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
|
16天前
|
Java 关系型数据库 MySQL
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
本文介绍了一款基于Spring Boot和JSP技术的房屋租赁系统,旨在通过自动化和信息化手段提升房屋管理效率,优化租户体验。系统采用JDK 1.8、Maven 3.6、MySQL 8.0、JSP、Layui和Spring Boot 2.0等技术栈,实现了高效的房源管理和便捷的租户服务。通过该系统,房东可以轻松管理房源,租户可以快速找到合适的住所,双方都能享受数字化带来的便利。未来,系统将持续优化升级,提供更多完善的服务。
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
|
19天前
|
JavaScript 前端开发 安全
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中,处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程,包括网络请求监测、代码分析、加密算法推测及解密逻辑研究,并提供了实战步骤,如确定加密入口点、逆向分析算法及模拟加密解密过程。此外,还强调了法律合规性和安全性的重要性,帮助读者合法且安全地进行逆向工程。
66 11
|
12天前
|
存储 API 数据库
QML使用Sqlite数据库存储ListModel数据
本文介绍了在QML中使用Sqlite数据库存储ListModel数据的方法,包括如何创建数据库、读取数据、动态添加和删除数据,以及如何在程序启动和退出时与数据库同步数据。
|
21天前
|
存储 人工智能 Cloud Native
云栖重磅|从数据到智能:Data+AI驱动的云原生数据库
阿里云数据库重磅升级!元数据服务OneMeta + OneOps统一管理多模态数据
|
2天前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
1月前
|
SQL NoSQL Java
彻底革新你的数据库操作体验!Micronaut数据访问技巧让你瞬间爱上代码编写!
【9月更文挑战第10天】Java开发者们一直在寻找简化应用程序与数据库交互的方法。Micronaut作为一个现代框架,提供了多种工具和特性来提升数据访问效率。本文介绍如何使用Micronaut简化数据库操作,并提供具体示例代码。Micronaut支持JPA/Hibernate、SQL及NoSQL(如MongoDB),简化配置并无缝集成。通过定义带有`@Repository`注解的接口,可以实现Spring Data风格的命名查询。
50 6
|
13天前
|
JSON JavaScript 前端开发
6-19|Python数据传到JS的方法
6-19|Python数据传到JS的方法