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

2013-06-19

jsp做一个二级下拉菜单，有问题了~~小妹用最简单的方法做一个二级联动下拉菜单，从数据库中取数作为选项。但

jsp做一个二级下拉菜单，有问题了~~
小妹用最简单的方法做一个二级联动下拉菜单，从数据库中取数作为选项。但是一级选项还能出来，选好一级选项后二级选项出不来。劳烦各位大虾帮我看看，谢谢了~~

<%@ 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 是数组的数组，即二维数组
<%
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>

正在上班 lz参考下吧  我原先做也是参考这个的
[解决办法]
不匹配应该搞错的。。。  那你进行类型转换后能行么？
[解决办法]
建议用jqury.ajax
[解决办法]
ajaX比较容易吧. ..省事
如果把所有的都拿出来就需要手动的配一下.

热点排行

Java Web开发

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