zoukankan      html  css  js  c++  java
  • javascript级联菜单,数据从数据库中获取

    1.html代码:
    <%@ 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>
    

      


     2.javascript代码:

    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>
    

      

     

  • 相关阅读:
    【QML Model-View】ListView-简单使用(一)
    QML 界面切换的几种方法(带示例代码)
    QML 常用控件:TextInput, TextField, TextEdit, TextArea(编辑框)用法及自定义
    props参数赋值给data
    nprogress 跳转路由进度条
    小程序页面加水印
    el-table默认展示所有行
    父子路由传参
    IE接口缓存
    wireshark抓包新手使用教程
  • 原文地址:https://www.cnblogs.com/haore147/p/3617944.html
Copyright © 2011-2022 走看看