Jsp+javascript打造二级级联下拉菜单

javascript|js|菜单|下拉

数据库需求分析:
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" prefix="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" size="1">
          <OPTION selected value>==请选一级分类==</OPTION>
        <sql:query var="query" dataSource="${bookdev}">
          SELECT * FROM class
       </sql:query>
<c:forEach var="row" items="${query.rows}">
 <option value="${row.classId}">${row.className}</option>
</c:forEach>
</select>
      </TD>
      <TD>选择二级分类</TD>
      <TD>
        <SELECT name="NclassId">
          <OPTION selected value>==请选二级分类==</OPTION>
        </SELECT>
      </TD>
    </TR>
</TABLE>
 
</FORM>
</BODY>
</HTML>

时间: 2024-10-31 07:49:47

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%&g

JS二级级联下拉菜单

问题描述 有一个二级级联下拉菜单,但是就是不显示,大侠们看看啥问题? <tr><td align="right">学院:</td><td><select name="role" onBlur="checkRole(this)" onchange="populateMajor(this.options[this.selectedIndex].value)"><op

求关于asp.nat二级级联下拉菜单的做法

问题描述 asp.nat二级级联下拉菜单的做法,有两个表,都要从数据库中提取请诸位高手多多指教了. 解决方案 解决方案二:ajax解决方案三:css+[li,ul]isok解决方案四:up解决方案五: 解决方案六:2级数据不多的话可以用js来进行数组生成下拉菜单html如果数据多就用ajax调用返回html

javascript支持区号输入的省市二级联动下拉菜单_javascript技巧

省市二级联动下拉菜单,增加了区号输入.多组选项共用一组数据. 选择地区,可以获取区号,填写区号自动选取地区. 某些地市的区号收集中. 省份选择城区 省份选择城区 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

Bootstrap每天必学之级联下拉菜单_javascript技巧

本文将介绍自定义的bootstrap级联下拉菜单,主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用.说实话,封装好一个通用的组件还是需要花费很多精力的和时间的,所谓通用,自然要考虑周全,叹!这次整理的Bootstrap关联select,里面也涉及到了很多jquery.ajax.springMVC等等知识点,可谓包罗万象! 首先,请允许我代表该自定义组件做一番小小的介绍. "hi,你好,我叫yunm.combox.js,主人给我起的名字,其实呢,挺俗的.我

JavaScript 多级联动浮动(下拉)菜单 (第二版)

上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高. 这次除了修改已发现的问题外,还对程序做了大幅调整和改进,使程序实用性更高,功能更强大. 效果预览 菜单使用演示:  仿京东商城商品分类菜单:  仿window xp右键菜单:  仿淘宝拼音索引菜单:  程序原理 程序最关键的地方是多级联动,先大概说明一下: 首先第一级的菜单元素整理好后,从他们开始,当某个菜单元素触发显示下级菜单时, 准备好下一级的容器元素,并把下一级的菜单元素放进

用 PHPRPC 实现 Ajax 级联下拉菜单

ajax|菜单|下拉 级联下拉菜单就是从一个下拉菜单中选中一项后,相应的另一个下拉菜单的内容会随之改变. 一般来说,最简单的,就是每次选中都提交一次表单,刷新整个页面.这也是用户体验度最差的. 另一种是把所有选项在第一次加载时就全部载入整个页面中的 javascript 数组中,然后级联通过 JavaScript 来控制,在整个数据量不大时,这是一个不错的实现无刷新并且快速的方法,但是当整个数据量非常大时,这种方法就会使第一次加载变得非常慢了. 还有就是采用 Ajax 方式,即开始只载入第一层菜

用PHPRPC实现Ajax级联下拉菜单

级联下拉菜单就是从一个下拉菜单中选中一项后,相应的另一个下拉菜单的内容会随之改变. 一般来说,最简单的,就是每次选中都提交一次表单,刷新整个页面.这也是用户体验度最差的. 另一种是把所有选项在第一次加载时就全部载入整个页面中的 javascript 数组中,然后级联通过 JavaScript 来控制,在整个数据量不大时,这是一个不错的实现无刷新并且快速的方法,但是当整个数据量非常大时,这种方法就会使第一次加载变得非常慢了. 还有就是采用 Ajax 方式,即开始只载入第一层菜单的内容,当用户选中第

PHP地区二级联动下拉菜单代码

<?php header('Content-Type: application/json; charset=utf-8'); echo 'province=[];'; foreach ($arrProvinces as $province) { echo 'province.push(['.$province['ProvinceID'].',"'.$province['ProvinceName'].'"]);'; } echo 'city=[];'; foreach ($arrC