AJAX实现级联菜单示例

最新推荐文章于 2021-08-05 22:15:46 发布
最新推荐文章于 2021-08-05 22:15:46 发布
阅读量399 收藏
点赞数
文章标签： Ajax SQL JavaScript J# SUN ViewUI
J +JavaScript打造二级级联下拉菜单：

cla (一级栏目信息）：cla Id(自动编号），cla ame（栏目名称）, Ncla （二级栏目信息）, Ncla Id（自动编号），Ncla ame(栏目名称），parentId（一级栏目id，与cla 表中的cla Id关联）

<%@ page contentType=text/html; charset=GB2312 language=java errorPage=../error.j %>
<%@ include file=../co .j %>
<%@ include file=../ds.j %>
<%@ taglib uri=http://java.sun.com/j /jstl/sql divfix=sql %>
<%request.setCharacterEncoding(gb2312); %>
<HTML> lt;HEAD>
<META http-equiv=Content-Type content=text/html; charset=gb2312>
<TITLE>级联菜单</TITLE>
<LINK rel=stylesheet type=text/c href=style.c gt;
</HEAD>
<!--从数据库中得到二级栏目信息-->
<%String sql=select * from Ncla order by Ncla Id asc;
ResultSet rs=stmt.executeQuery(sql);
%>
<!--将二级栏目信息保存到数组subcat中-->
< cript type=text/javascript>
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
while(rs.next()){
%>
subcat[<%=count%>] = new Array(<%=rs.getString(Ncla ame)%>,
<%=rs.getString(Ncla Id)%>,<%=rs.getString(parentId)%>);
<%
count++;
}
rs.close();
%>
onecount=<%=count%>
<!--决定select显示的函数-->
function changelocation(locationid)
{
document.myform.Ncla Id.length = 0;

var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][2] == locationid)
{
document.myform.Ncla Id.optio [document.myform.Ncla Id.length] = new
Option(subcat[i][0], subcat[i][1]);
}
}
}
</script>
<FORM method=POST name=myform action=admi ave.j ?action=add>
<TABLE>

<TR>
<TD>一级分类</TD>
<TD>
< ELECT name=cla Id onChange=changelocation(document.myform.cla Id.optio
[document.myform.cla Id.selectedIndex].value) size=1>
<OPTION selected value>==请选一级分类==</OPTIO gt;
< ql:query var=query dataSource=$>
SELECT * FROM cla
</sql:query>
<c:forEach var=row items=$>
lt;option value=$>$</optio gt;
</c:forEach>
</select>
</TD>
<TD>选择二级分类</TD>
<TD>
< ELECT name=Ncla Id>
<OPTION selected value>==请选二级分类==</OPTIO gt;
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
<%@ page contentType=text/html; charset=GB2312 language=java errorPage=../error.j %>
<%@ include file=../co .j %>
<%@ include file=../ds.j %>
<%@ taglib uri=http://java.sun.com/j /jstl/sql divfix=sql %>
<%request.setCharacterEncoding(gb2312); %>
<HTML> lt;HEAD>
<META http-equiv=Content-Type content=text/html; charset=gb2312>
<TITLE>级联菜单</TITLE>
<LINK rel=stylesheet type=text/c href=style.c gt;
</HEAD>
<!--从数据库中得到二级栏目信息-->
<%String sql=select * from Ncla order by Ncla Id asc;
ResultSet rs=stmt.executeQuery(sql);
%>
<!--将二级栏目信息保存到数组subcat中-->
< cript type=text/javascript>
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
while(rs.next()){
%>
subcat[<%=count%>] = new Array(<%=rs.getString(Ncla ame)%>,
<%=rs.getString(Ncla Id)%>,<%=rs.getString(parentId)%>);
<%
count++;
}
rs.close();
%>
onecount=<%=count%>
<!--决定select显示的函数-->
function changelocation(locationid)
{
document.myform.Ncla Id.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][2] == locationid)
{
document.myform.Ncla Id.optio [document.myform.Ncla Id.length] = new
Option(subcat[i][0], subcat[i][1]);
}
}
}
</script>
<FORM method=POST name=myform action=admi ave.j ?action=add>
<TABLE>
<TR>
<TD>一级分类</TD>
<TD>
< ELECT name=cla Id onChange=changelocation(document.myform.cla Id.optio
[document.myform.cla Id.selectedIndex].value) size=1>
<OPTION selected value>==请选一级分类==</OPTIO gt;
< ql:query var=query dataSource=$>
SELECT * FROM cla
</sql:query>
<c:forEach var=row items=$>
lt;option value=$>$</optio gt;
</c:forEach>
</select>
</TD>
<TD>选择二级分类</TD>
<TD>
< ELECT name=Ncla Id>
<OPTION selected value>==请选二级分类==</OPTIO gt;
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
[b]
balan326
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax省市线三级联动
weixin_38167855的博客
05-13 227
<script type='text/javascript' src='http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.2'></script> <script type="text/javascript"> var xmldom=null;//声明一个全局变...
php原生态三级联动_php 三级联动菜单
weixin_34353619的博客
03-09 187
php 三级联动菜单2021-01-23 19:17:066数据库结构复制代码 代码如下:-- 表的结构 `bigclass`--CREATE TABLE `bigclass` (`bigclassid` int(11) NOT NULL auto_increment,`bigclassname` varchar(200) collate utf8_unicode_ci NOT NULL,`sor...
php两级菜单数据库查询,php二级联动菜单（级联菜单），带数据库信息
weixin_42510792的博客
03-19 211
要在write.php页面放一个二级联动，则在write.php页面要放置二级联动的地方加一句require_once("ld2.php");若write.php要向save.php页面提交数据则在save.php中使用＄bigclass=＄_POST["bigclass"];//取得大类的id值＄smallclass=＄_POST["smallclass"];//取得小类的id值接下来就知道该怎...
JAVA 二级联动菜单
wuxiangqian
03-12 480
&lt;%@ page language="java" pageEncoding="UTF-8"%&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;二级菜单联动演示&lt;/title&gt; &lt;script type="text/javascript"&gt;
ajax实现级联菜单
10-08
包含数据库字段设计、jsp页面代码编写、最后的运行效果
jQuery+ajax实现无刷新级联菜单示例
12-10
下面是做的一个前台用JQUERY，AJAX调用后台方法做的无刷新级联菜单 CasMenu.aspx页面： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE...
Ajax 实现级联菜单
03-06
在本文中，我们将深入探讨如何使用...总结，实现Ajax级联菜单的关键在于数据库设计、服务器端数据处理以及前端的Ajax请求与动态更新。通过这种方式，我们可以构建一个灵活、响应的Web应用，提供流畅的多级选择体验。
前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例
10-27
总结来说，这个示例展示了如何使用jQuery AJAX调用ASP.NET后台的Web方法，实现无刷新的级联菜单。前端监听用户的选择，然后通过AJAX请求获取新的数据，后台方法处理请求并返回数据，前端再根据返回的数据更新界面。...
Ajax实现级联菜单
02-26
非常详细的一个级联菜单,很适合刚学ajax的朋友! 大家不懂的发送邮件给我,白天都在线! /** * js文件说明：实现 分公司-->支公司-->代理机构 三级下拉级联菜单 * <p>作者：朱亮</p> * <p>版本： 1.0</p> * <p>修改历史</p> * <p>2007.01.02 朱亮 创建</p> */ /**下拉的级联实现**/ var xmlHttp; var domainId;///选种的值 var type; function refreshList(typesource,whichjsp){ xmlHttp = createXMLHttpRequest();///获取浏览器的版本 if(xmlHttp){ type = typesource; if ("branch" == type) { getSelectedId("branchinfo"); } else if("subbranch" == type) { getSelectedId("subbranchinfo"); } var queryStr = "domainId=" + domainId+"
jQuery实现级联菜单<数据动态加载>
逆风飞舞2016的博客
07-24 9884
级联菜单数据动态加载
经典Ajax省市级联菜单
12-23
这是我的独创思维,我用Ajax访问servlet,这个servlet是一个"text/xml"哦! 很经典,不信下载来看看啊,记住留言哦!
全国（省，直辖市，自治区，特别行政区）映射集合
weixin_30505225的博客
11-28 258
package com.wgh.model; import java.sql.Connection;import java.sql.DriverManager;import java.util.LinkedHashMap;import java.util.Map; public class CityMap { /** * 全国（省，直辖市，自治区，特别行政区）映射集合 ...
Jquery ajax 实现两级下拉菜单联动
XBoy
12-02 6762
一、概述：     最近在项目开发中遇到了需要根据银行总行查出其对应的分行，其中一个下拉菜单显示总行，另一个下拉菜单显示分行，如下图所示：二、实现步骤：      声明：因为本人公司用的是自己的框架，很久以前开发的，所以很多处里都是在jsp页面里进行的，大家可以参考一下我的步骤，然后可以在一些开源框架中实现。     1. 假设银行选择下拉菜单所在页面为bankInfo.jsp，在bankInfo.jsp页面中先查出所有银行的总行，然后再将查出的所有银行总行对象循环添加到总行所对应的下拉菜单中。     2
java结合jQuery.ajax实现左右菜单联动刷新列表内容
dgz41976的博客
08-23 248
http://域名/一级菜单ID-二级菜单ID/用这样的URL请求页面，出现如图所示内容； 该页面包含四部分，顶部目录+左侧菜单+右侧菜单+右下侧数据列表； 左侧菜单包含一级菜单和二级菜单，点击某个一级菜单时打开对应的二级菜单，同时右侧也显示二级菜单；选中左侧某个二级菜单，右侧对应的二级菜单也被选中，点击右侧二级菜单，显示对应的三级菜单，默认选中三级菜单的全部，点击某个三级菜单，列...
Ajax实现动态的二级级联菜单
weixin_30872157的博客
09-18 197
今天花了点时间用Ajax实现了一个二级级联菜单。整理总结一下。为了把重点放在Ajax和级联菜单的实现上，本文省略了数据库建表语句和操作数据库的代码！ 数据库建表语句就不帖出来了。主要有两张表，区域表：district。街道表：street。区域表和街道表是一对多关系，一个区域可以有零到多个街道，一条街道属于一个区域。数据如下： 页面代码 index.js...
Ajax实现级联
Zartillery的博客
01-15 794
级联代码： //一级下拉框 var categoryLevel1 = $("#categoryLevel1"); //拿到一级下拉框元素 categoryLevel1.append("&lt;option&gt;请选择&lt;/option&gt;") $.ajax({ type: "GET",//请求类型 ...
Ajax之联级菜单
surpassone的专栏
09-05 371
1.html代码 <ul> <a href="#">菜单1</a> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> <ul> <a href="#">菜单2</a>
ajax实现级联列表,AJAX实现web页面中级联菜单的设计
weixin_31302909的博客
08-05 131
小弟花了一点时间搞了个级联菜单，贴上来请大家看看。本例中只要你选择成员分类名称就会自动显示成员名称：首先在eclipse中建一个项目，名称你自己做主了，这里为Easyjf-menu，对应的浏览器页面代码为：Easyjf-menu.jsp：……..var XMLHttpReq;var currentSort;//创建xmlhttprequset对象function createXMLHttpRequ...
ajax级联菜单城市示例
最新发布
05-09
Ajax级联菜单城市示例是一种基于Ajax技术实现的动态选择城市的交互方式。它可以在页面中选择省份和城市，然后根据选择的省份和城市动态加载对应的数据。 这个示例的实现原理是通过JavaScript调用Ajax技术向服务器端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值