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]
分享到:
- 2007-11-30 05:29
- 浏览 1407
- 评论(0)
- 论坛回复 / 浏览 (0 / 5154)
- 查看更多
相关推荐
异步的级联菜单实现了无级限制的下拉菜单,通过更改部分代码可以实现不同菜单的级联。本示例需要后台配合数据的传送。请注意示例的AjaxMultiMenu.html页面源代码注释。
主要介绍了jQuery+ajax实现无刷新级联菜单示例,代码很完整,也非常实用,有需要的小伙伴可以参考下。
Js Select下拉框级联菜单,一共支持5级联动,相信够用了,这种菜单不用多介绍吧,后一级的值与前一级是父、子关系,该示例还演示了动态添加菜单、减少菜单的功能,还有显示/不显示空值的功能,如演示截图所示。
前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 CasMenu.aspx页面: 代码如下: <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”CasMenu.aspx.cs” Inherits=”_Default” %> <...
说明:这是用c#语言在vs2005下改写的一位朋友用asp实现的省、市、县三级级联菜单,数据库用access,是c#实现ajax的典型实例。在此对那位朋友表示感谢,此示例旨在帮助一些对ajax技术感兴趣的朋友们快速入门。下面的...
例子2:按需取数据—级联菜单 例子3:读取外部数据 六、AJAX的缺陷 七、AJAX开发 7.1、AJAX应用到的技术 A、XMLHttpRequest对象 B、Javascript C、DOM D、XML 7.2、AJAX开发框架 A、初始化对象并...
级联下拉菜单jQuery插件,它允许您根据先前的选择来填充一组表单下拉菜单。演示版基本用法要使用该插件而不覆盖任何默认设置,您需要使用多个下拉(选择)菜单创建表单的结构。 在以下示例中,我正在使用<form>...
主要介绍了jQuery ajax+PHP实现的级联下拉列表框功能,涉及php结合jQuery的$.get方法动态交互实现省市二级联动下拉列表框相关操作技巧,需要的朋友可以参考下
本文为大家介绍下使用ajax技术读取数据库内容并生成二级联动下拉选择菜单,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助
现在流行的ajax视频教程,几个示例包括用户名验证,级联菜单,dwr框架的应用~是exe格式的
DWR AJAX 级联下拉菜单,动态调用远程方法
本文实例讲述了PHP+ajax实现二级联动菜单功能。分享给大家供大家参考,具体如下: 如何实现二级联动 工作原理 二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新,...
JS(JQUERY)AJAX前台调用后台的方法示例,无刷新级联菜单
例子2:按需取数据—级联菜单 例子3:读取外部数据 六、AJAX的缺陷 七、AJAX开发 7.1、AJAX应用到的技术 A、XMLHttpRequest对象 B、Javascript C、DOM D、XML 7.2、AJAX开发框架 A、...
级联菜单 <br>例子3 :读取外部数据 <br>六、AJAX 的缺陷 七、AJAX 开发 7.1 、AJAX 应用到的技术 A 、XMLHttpRequest 对象 <br>B 、Javascript C 、DOM D 、XML 7.2 、AJAX 开发...
例子2:按需取数据 级联菜单 例子3:读取外部数据 六 AJAX的缺陷 七 AJAX开发 7 1 AJAX应用到的技术 A XMLHttpRequest对象 B Javas cript C DOM D XML 7 2 AJAX开发框架 A 初始化对象并发出...
例子2:按需取数据—级联菜单... 7 例子3:读取外部数据... 7 六、AJAX的缺陷... 7 七、AJAX开发... 8 7.1、AJAX应用到的技术... 8 A、XMLHttpRequest对象... 8 B、Javascript. 9 C、DOM. 9 ...