小妹用最简单的方法做一个二级联动下拉菜单,从数据库中取数作为选项。但是一级选项还能出来,选好一级选项后二级选项出不来。劳烦各位大虾帮我看看,谢谢了~~<%@ 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.   

    一级菜单没得说,直接数据库读取
    二级菜单就可以用两种方法实现,
      1、先预读出所有二级选项及对应一级选项的classname,待选择一级菜单后利用js更换二级菜单的选项
      2、选择一级菜单后,再从数据库读取二级菜单选项,更新到二级菜单,可以隐含一个页面作为刷新,这种办法比较繁琐些
    <script language=javascript>
    //最先从数据库读取所有选项值
    //allSel数组形如:((北京,中关村,国贸,天安门,....),(上海,黄埔,....).....)
    //(北京,中关村,国贸,天安门,....)---->第一个为一级选项,后面为二级选项
     var allSel=new Array();//储存所有一级、二级选项,定义成全局变量
     var tmpSel=new Array();//临时选项 allSel.add(tmpSel) allSel 是数组的数组,即二维数组
     <%
     dim bNew
     rs.open "select * from big,small where big.bigclassName=small.bigclassname order by big.bigclassname",1,3,conn
     bNew=rs("big.bigclassname")
     response.write "tmpSel=new Array();"
     response.write "tmpSel.add('" & rs("big.bigclassname") & "');"
     do while not rs.eof
      if bNew<>rs("big.bigclassname") then '新城市
      response.write "allSel.add(tmpSel);"
      response.write "tmpSel=new Array();"
      response.write "tmpSel.add(" & rs("big.bigclassname") & ")"
      end if  
      rsponse.write "tmpSel.add('" & rs("small.smallclassname") & "');" ‘加入二级菜单
      rs.movenext
     loop
     rs.close
     %>
    </script>
    一级菜单:<select id=bigsel onchange=sel_chg(this)>
    <%
    rs.open "select * from big",conn,1,3
    do while not rs.eof
      response.write "<option value=" & rs("id") & ">" & rs("bigclassname") & "</option>"
      rs.movenext
    loop
    rs.close
    %>
    </select>
    二级菜单<select id=ssel><option value=-1>请选择...</option></select>
    js实现更新二级菜单
    <script language=javascript>
    function chgOption(op_arr){ //根据参数修改下拉菜单选项
     var vOptions,iii;
     var obj=document.all.ssel; //二级菜单obj
     for(iii=0;iii<obj.length-1;iii++)obj.options.remove(0);//移除原二级菜单选项
     for(iii=1;iii<op_arr.length;i++) { //iii=1
      vOptions=document.createElement("option");
      vOptions.value=iii;
      vOptions.text=op_arr[iii];
      obj.options.add(vOptions);
     }
    }
    function sel_chg(obj){ //一级菜单选择后发起替换二级菜单
     //获知是哪个选项被选中
     var selIdx=obj.selectedIndex;
     //根据之前的allSel替换二级菜单
     chgOption(allSel[selIdx]);//注意这里调用allSel[selIdx]
    }
    </script>