首页 | 资讯动态 | linux基础 | 系统管理 | 网络管理 | 编程开发 | linux数据库 | 服务器技术 | linux相关 | linux认证 | 嵌入式 | 下载中心 | 专题 | linux招聘 | 镜像站
OKLinux中文技术站
·设为首页
·加入收藏
·联系我们
系统管理: 中文环境 系统管理 桌面应用 内核技术 | Linux基础: 基础入门 安装配置 常用命令 经验技巧 软件应用 | Linux数据库: Mysql Postgre Oracle DB2 Sybase other
网络管理: 网络安全 网络应用 Linux服务器 环境配置 黑客安全 | 编程开发: PHP CC++ Python Perl Shell 嵌入式开发 java jsp | PHP技术: PHP基础 PHP技巧 PHP应用 PHP文摘
Linux资讯 Linux招聘 Linux专题 Apache | Linux相关: 硬件相关 Linux解决方案 Linux认证 企业应用 其它Unix | 相关下载: 资料下载 参考手册 开发工具 服务器类 软路由 其它
 技术搜索:
会员中心 注册会员 高级搜索  
  → 当前位置:首页>编程开发>java>Java基础>正文

用JSP JavaScript打造二级级联下拉菜单

http://www.oklinux.cn  2008-01-20  来源: 赛迪网 dxaw  会员收藏  游客收藏  【 】 

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=___FCKpd___0gt; 
          SELECT * FROM class 
       </sql:query> 
<c:forEach var=row items=___FCKpd___0gt; 
 <option value=___FCKpd___0gt;___FCKpd___0lt;/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=___FCKpd___0gt; 
          SELECT * FROM class 
       </sql:query> 
<c:forEach var=row items=___FCKpd___0gt; 
 <option value=___FCKpd___0gt;___FCKpd___0lt;/option> 
</c:forEach> 
</select> 
      </TD> 
      <TD>选择二级分类</TD> 
      <TD> 
        <SELECT name=NclassId> 
          <OPTION selected value>==请选二级分类==</OPTION> 
        </SELECT> 
      </TD> 
    </TR> 
</TABLE> 
  
</FORM> 
</BODY> 
</HTML>

 


上一篇:如何在JSP页面发送一个动态图像   下一篇:在JSP环境中配置使用fckeditor详细讲解


收藏于收藏夹】 【评论】 【推荐】 【打印】 【关闭
相关文档
·在JSP环境中配置使用fckeditor详细讲解
·如何在JSP页面发送一个动态图像
·使用AJAX技术实现网页无闪自动局部刷新
·详细讲解在Hibernate中检索策略的应用
·用Struts向MYSQL数据库中储存图片实例
·Hibernate中Session的缓存及对象的状态
·JSP JavaBean Servlet工作原理实例讲解
·Linux下安装整合Apache和Tomcat全过程
·Taglib的打包部署和使用方式详解
·JSP中include指令和include行为的区别
·WEB开发Struts:Session对象创建和控制
·JSP获取客户端的浏览器和操作系统信息
·JSP中调用SQL Server存储过程实例讲解
·AJAX应用篇:必须用到和不必使用的地方
·在Weblogic上配置JMS服务的方法
·快速教您Apache Tomcat SSL的配置
发表评论
密码: 匿名评论
评论内容:

(不超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规)
 
  最新文档
·Java入门:状态对象--数据库的替代者
·Java语言怎样调用外部应用程序
·Java语言深入--关于Java语言的内存泄漏
·JSP/Servlet/JSF:Servlet/JSP配置详解
·进阶-怎样使用AJAX进行WEB应用程序开发
·基础:J2ME程序开发之新手入门九大要点
·Java入门--Java语言接口与继承的本质
·JAVA进阶--如何提升JSP应用程序的效率
·对Java中四种XML解析技术之不完全测试
·编写高级 JScript应用代码
·JSP/Servlet/JSF--对标签库的深入研究
·Java入门--关于字符串分割的两种方法
  阅读排行
·使用AJAX技术实现网页无闪自动局部刷新
·快速教您Apache Tomcat SSL的配置
·Java语言深入--java调用C/C 的过程
·JAVA进阶--线程运行栈信息的获取讲解
·J2SE综合--JAVA实现把汉字转化成拼音
·使用WEBWORK实现文件上传方法实例详解
·一个非常有趣的使用spring框架AOP例子
·关于java中相对路径,绝对路径问题总结
·高级:lucene全文检索应用示例及代码简
·详细讲解Struts构架中action的跳转大全
·在Weblogic上配置JMS服务的方法
·Hibernate配置文件中的映射元素详解
·对Java中四种XML解析技术之不完全测试
·数据库相关:小结Hibernate的查询方式
·在JSP环境中配置使用fckeditor详细讲解
网摘收藏: