4221学习网
首页 | 网址大全 | 脑力倍增 | 电脑学院 | 学习方法 | 英语学习 | 口才交际 | 工作职场 | 成功励志 | 文学小说 | 视频教程 | 视频短片 | 下载中心 | NBA | 奥运 | 图片专区 | QQ·技巧 | 游戏技巧 | 恋爱技巧 | 谈天说地 | 专题教程 | 4221论坛
热门关键字: 视频教程  百家讲坛  美女  记忆力  疯狂英语
 → 当前位置:4221学习网>电脑学院>编程开发>JavaScript>正文

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

4221学习网 2007-09-28 来源:互联网 收藏本文

训练30小时,让阅读提速5-10倍!---速读记忆训练软件免费下载!(点击下载)

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>

上一篇:JS实现无刷新联动菜单(select)的方法   下一篇:JS将字符串转为XML并读取对象值
添加到google书签 digg this! 添加到bolaa 添加到yahoo+ 添加到新浪vivi 添加到365key  
收藏】 【评论】 【推荐】 【投稿】 【打印】 【关闭

相关文章
·JS实现无刷新联动菜单(select)的方法
·JS将字符串转为XML并读取对象值
·解决JavaScript页面刷新与弹出窗口问题
·几种常用禁止修改输入框的方法
·使用Javascript评估用户输入密码的强度
·巧用Javascript代码来限制文本的字节数
·JavaScript实现多维数组多键值排序方法
·汇总:一些不错的使用频率比较高的JS函数
·javascript版的日期输入控件
·如何用javascript控制上传文件的大小
发表评论
要记得去论坛讨论,点击注册新会员) 密码: 匿名评论
评论内容:(请自觉遵守互联网相关政策法规。)
最新文章
·几种常用禁止修改输入框的方法
·JS将字符串转为XML并读取对象值
·JS实现无刷新联动菜单(select)的方法
·解决JavaScript页面刷新与弹出窗口问题
·使用Javascript评估用户输入密码的强度
·巧用Javascript代码来限制文本的字节数
·JavaScript实现多维数组多键值排序方法
·汇总:一些不错的使用频率比较高的JS函数
·javascript版的日期输入控件
·如何用javascript控制上传文件的大小
本类阅读排行榜
·JavaScript常用检测脚本
·JavaScript方法和技巧大全
·如何用javascript控制上传文件的大小
·JS实现无刷新联动菜单(select)的方法
·javascript版的日期输入控件
·解决JavaScript页面刷新与弹出窗口问题
·几种常用禁止修改输入框的方法
·JS技巧之showModelessDialog()使用详解
·JavaScript实现多维数组多键值排序方法
·巧用Javascript代码来限制文本的字节数
热点视频教程
视频街舞 舞步 教学
视频windowsxp重装系统视频教程
视频李孝利十分钟详细舞蹈教程
视频美女教你跳舞
视频街舞 舞步 教学2
视频双截棍视频教程-定式
视频如何安装双操作系统
视频韩国的太空步教程,后滑、侧滑、旋转太空
视频【WindowsXP入门教程】 - 硬盘分区
视频台球教程-基本杆法
视频[百家讲坛]三十六计01_借刀杀人
视频24式太极拳教学---基本动作
视频 斯诺克台球竿法-后退球
视频动物世界之决战生死线2
视频超级全脑速读训练教程

设为首页 - 加入收藏 - 关于我们 - 联系我们 - 友情连接

4221学习网版权所有-鄂ICP备07006816号
已浏览: