jsp做一个二级上拉菜单，有有关问题了~-Java教程-爱易网页

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

日期：2014-05-17　浏览次数：20691 次

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 tmp

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>