琥珀无限级分类联动菜单AJAX版

我做好琥珀无限级分类联动菜单Javascript版后，在蓝色理想和CSDN上发表了一下，梅花雪兄在CSDN上提出了效率不足的问题，我也认识到了这一点，本打算项目完工后再进行完善，但一时技痒，便在网上寻找了一下资料，最后做出了此AJAX版无限级分类联动菜单。因时间匆忙，做得比较粗糙，但已利用AJAX技术，实现无限级联动，待过一段时间再完善此版本。
希望能给大家提供一些帮助，有好的建议或bug可在此帖后回复或浏览http://www.51ajax.com/bbs/发帖。
运行环境：MS IE 6.0 FireFox 1.0.1
下载地址：请点击这里
在线Demo：请点击这里
Bug 反馈：请点击这里
最后更新：2005-10-20 16:18
共有两个文件：
文件ajax.html代码如下：

琥珀网 - 无限级联动菜单[AJAX版]

body, td
{
font-family: 宋体;
font-size: 12px;
}

function GetResult(str,classid)
{
/*
*--------------- GetResult(str,classid) -----------------
* GetResult(str)
* 功能:通过XMLHTTP发送请求,返回结果.
* 参数:str,字符串,发送条件;classid,数字,菜单级别
* 实例:GetResult(document.all.userid.value,1);
*--------------- GetResult(str,classid) -----------------
*/
//定义菜单级数，菜单ID数组，菜单对应字段数组
var MenuIdArr,MenuFieldArr,MenuClass
MenuIdArr= new Array()
MenuFieldArr=new Array()
MenuClass=4

MenuIdArr[1]="sel1"
MenuIdArr[2]="sel2"
MenuIdArr[3]="sel3"
MenuIdArr[4]="sel4"

MenuFieldArr[1]="name"
MenuFieldArr[2]="name"
MenuFieldArr[3]="name"
MenuFieldArr[4]="name"

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

var linkurl="http://www.10090.com/demo/hpmenu/ajax_server.asp?classid="+classid+"&sel="+str+"&fieldname="+MenuFieldArr[classid+1]
http_request.open("GET",linkurl,false);
http_request.send(null);

//服务器端处理返回的是经过escape编码的字符串.
//在页面显示服务器查询结果

var returntxt=unescape(http_request.responseText)
if(returntxt.length>0)
{document.all,ajax.innerHTML="服务器返回结果："+returntxt+" [Powered by AJAX]"}
else
{document.all,ajax.innerHTML=""}

//通过XMLHTTP返回数据,开始构建Select.
BuildSel(returntxt,eval("document.all."+MenuIdArr[classid+1]))
//============更改下下级以下菜单为空==============
var kkk
for(kkk=classid+2;kkk0)
{
for(var i=0;i

琥珀无限级联动菜单-AJAX版 [HPMenu_AJAX V1.0]
所 在 洲: -----请选择-----
亚洲
欧洲
国　　家: -----请选择-----
城　　市: -----请选择-----
地　　区: -----请选择-----
 
下载地址：请点击这里
在线Demo：请点击这里
Bug 反馈：请点击这里
最后更新：2005-10-20 16:18
联系方式：MSN:hopesoft@msn.com
copyright(c) 2005 Hopesoft Studio

GetResult(document.getElementById("sel1").value,1)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

文件ajax_server.asp代码如下：

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('/upload/2006111610308411.jpg');}" alt="" src="http://zsrimg.ikafan.com/upload/2006111610308411.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>

以上两个版本的程序，也是揉合了众多网友的智慧，经我之手呈现出来，互联网的初衷与精髓就在于分享，愿这个小程序能给您带来些许方便。

赞 (0)

相关推荐

  • 一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)

    一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)

    一个强健 实用的ajax二级联动菜单(有演示和附源程序打包下载) 前些天在搞后台的时候要用到二级联动的菜单,到网上去找了半天也没找到满意的,不是这错就是那错,在选择的时候有时候不能返回.真是郁闷.     后来就看到有人用ajax写了无限级分类(牛,呵呵,本人看不懂.).就想到我那个后台不也可以用ajax试试,虽然比用javascript的慢点,但我这个实用.强健..不会出错,也不会选择某个大类后再返回无选择状态小类为空的状态.呵呵.文件目录:如图 主要代码如下:index.asp 复制代码 代

  • 基于asp+ajax和数据库驱动的二级联动菜单

    index.asp 页面代码 复制代码 代码如下: <!--#include file="conn.asp" --> <% set cmd = conn.execute("select bigclassid,bigclassname from bigclass") tempid=cmd("bigclassid") %> <select name="menu" onChange="gets

  • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单

    首先是数据库的设计.分类表叫cate. 我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级,则父id为0,若有上级,则父id为上一级的id. 数据库有内容后,就可以开始写代码,进行二级联动的实现. 先在后台php获取所有pid为0的数据,保存到$cate中,然后在第一层的<select>中用foreach循环输出. Html代码: 复制代码 代码如下: <select name="type" s

  • 落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码

    绝对原创   测试地址: http://www.mlmm.cn/mypage/?name=ceshi 测试页代码: 复制代码 代码如下: <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>php+ajax动态生成下拉菜单</title>  <script lang

  • AJAX省市区三级联动下拉菜单(java版)

    AJAX省市区三级联动下拉菜单(java版)

    此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){ $.get("getProvince.do", function(result){ $("#showp").html(result); }); }) var xmlhttp; function mysend(str){ $(docum

  • Ajax二级联动菜单实现原理及代码

    index.jsp: 复制代码 代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>二级菜单联动演示</title> <script type="text/javascript"> var req; window.onload=function() {//页面加载时的函数 } f

  • ajax读取数据库内容实现二级联动下拉选择菜单示例

    复制代码 代码如下: <PRE class=javascript name="code"></PRE><PRE class=javascript name="code">---------------------这是ajax(javascript)代码---------------------------</PRE><PRE class=javascript name="code">&l

  • 琥珀无限级分类联动菜单AJAX版

    我做好琥珀无限级分类联动菜单Javascript版后,在蓝色理想和CSDN上发表了一下,梅花雪兄在CSDN上提出了效率不足的问题,我也认识到了这一点,本打算项目完工后再进行完善,但一时技痒,便在网上寻找了一下资料,最后做出了此AJAX版无限级分类联动菜单.因时间匆忙,做得比较粗糙,但已利用AJAX技术,实现无限级联动,待过一段时间再完善此版本.希望能给大家提供一些帮助,有好的建议或bug可在此帖后回复或浏览http://www.51ajax.com/bbs/发帖.运行环境:MS IE 6.0 F

  • 琥珀无限级联动菜单-JavaScript版

    琥珀网 - javascript无限级联动菜单 body, td { font-family: 宋体; font-size: 12px; } /*---------------------------------------------------------------------------*\ | Subject: JavaScript三级联动菜单 | | Version: 1.0 | | Author: 琥珀[hopesoft] | | FileName: HPMenu.js | | C

  • Angular.JS实现无限级的联动菜单(使用demo)

    前言 之前给大家介绍过一篇关于AngularJS中实现无限级联动菜单的文章,但没来得及和大家分享使用的示例,下面这篇文章就来给大家分享下几个使用的demo. 文中包括demo如下: 1. 同步加载子选项demo 2. 异步加载子选项demo 3. 初始值回填demo 4. 倒金字塔依赖demo 注意:在阅读本文前请先移步上一篇文章:http://www.jb51.net/article/78126.htm 1. 同步加载子选项 在各联动菜单加载之前,我们已经通过某种方式(比如后端渲染.api依赖

  • javascript实现无限级select联动菜单

    代码很简单,这里主要是给大家推荐一下本代码的实现思路,别具一格. 奉上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

  • asp实现无限级分类的方法js版

    MenuArr=new Array()MenuLenArr=new Array()SubMenuArr=new Array()MenuIdArr=new Array()MenuArr[1]="<%call top11%>" //洲名|||...MenuArr[2]="<%call top1%>" //洲名###国名|||...MenuIdArr[1]="zhou"MenuIdArr[2]="author"

  • 实例详解AngularJS实现无限级联动菜单

    多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的还是异步的?对于初始值的回填发生在前端还是后端?如果异步加载,是否对于后端API的返回格式有严格的定义?是否容易实现同步.异步共存?是否可以灵活的支持各类依赖关系?菜单中是否有空值选项?--一系列的问题都需要精心处理. 带着这些需求搜索了一圈,不太出乎意料,并没有能在AngularJS的生态中找到一

  • Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)

    本文主要介绍使用 Jquery+Ajax+xml,首先需要一个包含我国所有地图信息的xml文档. 此处选用的xml文档(共1000多行)主要结构如下: <?xml version="1.0" encoding="utf-8"?> <area Country="China"> <province ID="1" provinceID="110000" province="

  • PHP+ajax实现二级联动菜单功能示例

    PHP+ajax实现二级联动菜单功能示例

    本文实例讲述了PHP+ajax实现二级联动菜单功能.分享给大家供大家参考,具体如下: 如何实现二级联动 工作原理 二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新,它只会刷新我们需要改变值的地方,我们首先看下它的工作流程. 第一步:我们会向后台发送一个请求 第二步:后台接受请求后,会返回给我们一个值 第三步:将值用JS呈现在页面中 HTML代码 <html> <head> <title>www.jb51.net 二级

  • Ajax实现二级联动菜单

    本文实例为大家分享了Ajax二级联动菜单的具体代码,供大家参考,具体内容如下 index.jsp <%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>二级菜单联动演示</title> <script type="text/javascript"> var req; window.οnlοad

随机推荐