服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > JAVA > J2EE > Servlet/Jsp > 查看文档

用jsp+javascript打造二级级联下拉菜单

jsp+javascript打造二级级联下拉菜单:

class(一级栏目信息):classid(自动编号),classname(栏目名称), nclass(二级栏目信息), nclassid(自动编号),nclassname(栏目名称),parentid(一级栏目id,与class表中的classid关联)

<%@ page contenttype=text/html; charset=gb2312 language=java errorpage=../error.jsp %> 
<%@ include file=../conn.jsp%> 
<%@ include file=../ds.jsp%> 
<%@ taglib uri=http://java.sun.com/jsp/jstl/sql divfix=sql %> 
<%request.setcharacterencoding(gb2312); %> 
<html><head> 
<meta http-equiv=content-type content=text/html; charset=gb2312> 

<title>级联菜单</title> 
<link rel=stylesheet type=text/css href=style.css> 
</head> 
<!--从数据库中得到二级栏目信息--> 
<%string sql=select * from nclass order by nclassid asc; 
resultset rs=stmt.executequery(sql); 
%> 
<!--将二级栏目信息保存到数组subcat中--> 
<script type=text/javascript> 
var onecount; 
onecount=0; 
subcat = new array(); 
        <% 
        int count = 0; 
        while(rs.next()){ 
        %> 
subcat[<%=count%>] = new array(<%=rs.getstring(nclassname)%>,
<%=rs.getstring(nclassid)%>,<%=rs.getstring(parentid)%>); 
        <% 
        count++; 
        } 
        rs.close(); 
        %> 
onecount=<%=count%>; 
<!--决定select显示的函数--> 
function changelocation(locationid) 
    { 
    document.myform.nclassid.length = 0; 

    var locationid=locationid; 
    var i; 
    for (i=0;i < onecount; i++) 
        { 
            if (subcat[i][2] == locationid) 
            { 
                document.myform.nclassid.options[document.myform.nclassid.length] = new 
option(subcat[i][0], subcat[i][1]); 
            }        
        } 
        
    }    
</script> 

<form method=post name=myform action=adminsave.jsp?action=add> 
  <table> 
   
    <tr> 
      <td>一级分类</td> 
      <td>  
        <select name=classid onchange=changelocation(document.myform.classid.options
[document.myform.classid.selectedindex].value) size=1> 
          <option selected value>==请选一级分类==</option> 
        <sql:query var=query datasource=$> 
          select * from class 
       </sql:query> 
<c:foreach var=row items=$> 
 <option value=$>$</option> 
</c:foreach> 
</select> 
      </td> 
      <td>选择二级分类</td> 
      <td> 
        <select name=nclassid> 
          <option selected value>==请选二级分类==</option> 
        </select> 
      </td> 
    </tr> 
</table> 
  
</form> 
</body> 
</html>
<%@ page contenttype=text/html; charset=gb2312 language=java errorpage=../error.jsp %> 
<%@ include file=../conn.jsp%> 
<%@ include file=../ds.jsp%> 
<%@ taglib uri=http://java.sun.com/jsp/jstl/sql divfix=sql %> 
<%request.setcharacterencoding(gb2312); %> 
<html><head> 
<meta http-equiv=content-type content=text/html; charset=gb2312> 

<title>级联菜单</title> 
<link rel=stylesheet type=text/css href=style.css> 
</head> 
<!--从数据库中得到二级栏目信息--> 
<%string sql=select * from nclass order by nclassid asc; 
resultset rs=stmt.executequery(sql); 
%> 
<!--将二级栏目信息保存到数组subcat中--> 
<script type=text/javascript> 
var onecount; 
onecount=0; 
subcat = new array(); 
        <% 
        int count = 0; 
        while(rs.next()){ 
        %> 
subcat[<%=count%>] = new array(<%=rs.getstring(nclassname)%>,
<%=rs.getstring(nclassid)%>,<%=rs.getstring(parentid)%>); 
        <% 
        count++; 
        } 
        rs.close(); 
        %> 
onecount=<%=count%>; 
<!--决定select显示的函数--> 
function changelocation(locationid) 
    { 
    document.myform.nclassid.length = 0; 

    var locationid=locationid; 
    var i; 
    for (i=0;i < onecount; i++) 
        { 
            if (subcat[i][2] == locationid) 
            { 
                document.myform.nclassid.options[document.myform.nclassid.length] = new 
option(subcat[i][0], subcat[i][1]); 
            }        
        } 
        
    }    
</script> 

<form method=post name=myform action=adminsave.jsp?action=add> 
  <table> 
   
    <tr> 
      <td>一级分类</td> 
      <td>  
        <select name=classid onchange=changelocation(document.myform.classid.options
[document.myform.classid.selectedindex].value) size=1> 
          <option selected value>==请选一级分类==</option> 
        <sql:query var=query datasource=$> 
          select * from class 
       </sql:query> 
<c:foreach var=row items=$> 
 <option value=$>$</option> 
</c:foreach> 
</select> 
      </td> 
      <td>选择二级分类</td> 
      <td> 
        <select name=nclassid> 
          <option selected value>==请选二级分类==</option> 
        </select> 
      </td> 
    </tr> 
</table> 
  
</form> 
</body> 
</html>

扫描关注微信公众号