小妹用最简单的方法做一个二级联动下拉菜单,从数据库中取数作为选项。但是一级选项还能出来,选好一级选项后二级选项出不来。劳烦各位大虾帮我看看,谢谢了~~
- Java code
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8" session="true"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head><% String SqlQuery="SELECT * FROM binary_system"; Class.forName("com.mysql.jdbc.Driver").newInstance(); Connection conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/zhengshi","root","zky"); Statement sql=conn.createStatement(); ResultSet rs=sql.executeQuery(SqlQuery);%><script type="text/javascript"> var onecount; onecount=0; subcat = new Array(); <% int count = 0; while(rs.next()){ %> subcat[<%=count%>] = new Array("<%=rs.getString("element1")%>","<%=rs.getString("element2")%>","<%=rs.getString("phase")%>"); <% count++; } rs.close(); %> onecount=<%=count%>; function select1(locationid) { document.myform.erji.length = 0; var i; for (i=0;i < onecount; i++) { if (subcat[i][0].equals(locationid)) { document.myform.erji.options[document.myform.erji.length] = new Option(subcat[i][1]); } } } </script> <body> <form name="myform" method="post"> 元素1: <select id="yiji" name="yiji" onchange="select1(document.myform.yiji.options[document.myform.yiji.selectedIndex].text);"> <OPTION selected value>==请选一级元素==</OPTION> <% Statement sql2=conn.createStatement(); ResultSet rs2=sql.executeQuery(SqlQuery); while(rs2.next()){ %> <option value=<%=rs2.getString("element1")%>><%=rs2.getString("element1")%></option> <% } %> </select> 元素2:<select id="erji" name="erji" > <OPTION selected value>==请选二级元素==</OPTION> </select> <input type="submit" value="提交"></form> </body></html>
------解决方案--------------------------------------------------------
一级菜单没得说,直接数据库读取
二级菜单就可以用两种方法实现,
1、先预读出所有二级选项及对应一级选项的classname,待选择一级菜单后利用js更换二级菜单的选项
2、选择一级菜单后,再从数据库读取二级菜单选项,更新到二级菜单,可以隐含一个页面作为刷新,这种办法比较繁琐些
<script language=javascript>
//最先从数据库读取所有选项值
//allSel数组形如:((北京,中关村,国贸,天安门,....),(上海,黄埔,....).....)
//(北京,中关村,国贸,天安门,....)---->第一个为一级选项,后面为二级选项
var allSel=new Array();//储存所有一级、二级选项,定义成全局变量
var tmpSel=new Array();//临时选项 allSel.add(tmpSel) allSel 是数组的数组,即二维数组