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

最新推荐文章于 2024-09-06 13:29:35 发布
最新推荐文章于 2024-09-06 13:29:35 发布
阅读量679 收藏
点赞数
分类专栏： 积累站 文章标签： javascript jsp stylesheet include sql query

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= myformaction= 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= myformaction= 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>

wang_dong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现二级下拉菜单联动
weixin_39006917的博客
05-15 2142
实现效果 选择相应的省份，二级菜单默认显示省会城市，同时可以选择其他城市。 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /** * 实现二级菜单级联 */ var prov
javascript原生实现二级联动下拉菜单
2201_75604580的博客
03-19 475
三、 JS简单实现二级联动菜单实现思路：事件源头：城市对应的下拉列表事件属性：选中的值改变 onchange事件监听：根据选择城市展示县区信息核心:监听函数的实现——>根据选中城市展示县区信息var city={tj:[“北辰区”,“西青区”,“武清区”,“和平区”,“滨海新区”],zy:[“红花港区”,“播州区”],bj:[“海淀区”,“朝阳区”,“东城区”]zz:[“二七区”,“金水区”,“中原区”],
java js 二级联动下拉列表_Jsp+javascript打造二级级联下拉菜单
weixin_28977143的博客
02-13 271
数据库需求分析：class(一级栏目信息)：classId(自动编号)，className(栏目名称)Nclass(二级栏目信息)：NclassId(自动编号)，NclassName(栏目名称)，parentId(一级栏目id，与class表中的classId关联)级联菜单ResultSet rs=stmt.executeQuery(sql);%>var onecount;onecount=...
用JSP+javascript打造二级级联下拉菜单
feng5588feng的专栏
03-20 400
 JSP+javascript打造二级级联下拉菜单： class(一级栏目信息）：classId(自动编号），className（栏目名称）, Nclass（二级栏目信息）, NclassId（自动编号），NclassName(栏目名称），parentId（一级栏目id，与class表中的classId关联）&lt;%@ page contentType=text/html; charset=GB...
JSP+JavaScript二级级联下拉菜单
06-26
在使用JSP JavaScript过程中有很多的技巧与实现，那么如何构建二级级联下拉菜单呢，本文将会向你做一个源码上的介绍。
JSP+JavaScript打造二级级联下拉菜单
11-28
### JSP+JavaScript 实现二级级联下拉菜单的知识点解析 #### 一、概述 在Web开发领域，实现动态的交互式用户界面是提升用户体验的重要手段之一。本文档将详细解析如何通过JSP（JavaServer Pages）与JavaScript来...
jsp+json+mySql 实现二级级联下拉菜单
07-27
在本文中，我们将深入探讨如何使用JSP、JSON和MySQL来实现一个二级级联下拉菜单。这个功能常用于网站的表单设计中，让用户能够从相关联的分类中选择选项，例如省份与城市的选择。 首先，让我们了解这三个技术的核心...
jquery+ajax+jsp+servlet实现二级级联菜单
01-15
首先，需要构建HTML结构，其中包含两个下拉菜单，一个用于显示一级菜单（部门），另一个用于显示根据选中的部门动态获取的二级菜单（子部门）。 ```html <!-- 一级部门列表 --> <option value="0">---请选择--...
Vue双向绑定
m0_56131422的博客
09-01 772
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 299
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1489
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 482
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 833
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1305
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
界面控件KendoReact中文教程 - 如何创建动态进度条？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-06 1055
本文主要介绍如何使用KendoReact ProgressBar和ChunkProgressBar组件在React应用程序中创建动态进度条，欢迎下载新版控件体验！
Nginx部署前端Vue项目
不会代码的小林
09-03 1309
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
手写 Vue Router 中的 Hash 模式和 History 模式
最新发布
书呆子ITme
09-06 643
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
Jquery+ajax实现三级级联下拉菜单
05-23
三级级联下拉菜单可以通过Jquery+Ajax实现，以下是一个简单的示例代码： HTML代码： ```html 请选择省份 北京">北京 上海">上海 广东">广东 请选择城市 请选择区县 ``` Jquery+Ajax代码： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值