当前位置: 代码迷 >> Java Web开发 >> jsp做一个二级上拉菜单,有有关问题了~
  详细解决方案

jsp做一个二级上拉菜单,有有关问题了~

热度:5512   发布时间:2013-02-25 21:13:37.0
jsp做一个二级下拉菜单,有问题了~~
小妹用最简单的方法做一个二级联动下拉菜单,从数据库中取数作为选项。但是一级选项还能出来,选好一级选项后二级选项出不来。劳烦各位大虾帮我看看,谢谢了~~
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 是数组的数组,即二维数组
  相关解决方案