编写JavaScript代码,控制菜单的显示

原创 2006年06月20日 10:49:00

四、编写JavaScript代码,控制菜单的显示

其实有经验的程序员,读到这里应该知道如何进行下去。但您不妨读下去,也许,笔者的方法对您未必不是一种新的尝试。而且,据我猜测,读我这篇文章的大多数都是没有经验的程序员,呵呵,帮人帮到底吧。Come On, Let's Go.
让菜单显示出来,其实有好几种思路。利用ASP等程序直接生成<SELECT>结构、利用OPTION对象的ADD和Remove方法动态添加和改变等等,都是可以使用的方法。但,经过笔者的多次实践和摸索,有一种方法更为有效,那就是利用Script代码动态的改写整个<SELECT>框架。

好,就让我们从加载页面(document)开始,一步一步的讲解JavaScript代码到底是如何控制菜单的显示的。

既然有三个菜单,那么我们就得事先设计出这样的HTML代码(其实要不要无所谓,放在那里只是为了便于理解):

 

您有可能要问,这里怎么什么数据都没有?不要奇怪,等一下您自然就会明白。我们来看一下<BODY>对象的ONLOAD事件body_onload()做了些什么工作?

 

让我们来研究一下。首先程序利用GetParent()函数取得s0的容器TD对象句柄,然后,利用MakMenu()函数产生菜单代码,并把代码赋值给刚才取得的TD对象;然后是s1,接着是s2.。GetParent()函数定义如下:
function GetParent(src, tag){
if (src && src.tagName!=tag){
return(GetParent(src.parentElement, tag));
}
return src;
}
这里的tag参数必须大写,例如TD、TR、TABLE,函数返回的是离src指定的元素最近的由tag标签定义的父对象。
我们要特别说明一下MakeMenu()函数,这个函数的作用不言而喻--产生菜单的HTML定义,先看看函数定义:

 

代码拷贝框

[Ctrl+A 全部选择 然后拷贝]

来看一下参数的含义。arrSub,指的是菜单数据的来源,其实就是我们上文定义的数组;pValue,指定父结点的编号,根据这个编号,我们可以找出所有的子结点数据;cValue,指定菜单的默认显示项;name,指定产生的<SELECT>菜单的名称;bulSkip,指定菜单的默认显示项是"<未选择>"还是具体数据。

GetSelectValue()函数的目的,就是取得<SELECT>对象当前显示的值。如果没有显示任何值,函数返回0。

 

那么,当用户加载页面之后,首先运行的就是body_onload()函数,该函数根据已经产生的JavaScript多维数组,利用MakeMenu()函数动态的生成菜单的HTML代码,并根据DHTML的原理加载到页面中。OK,运行一下页面,看看菜单是否正常显示?如果有什么问题,抓紧时间好好调试一下,例如数据库的连接是否正常,javascript代码的大小写是否正确,数组的定义是否有什么问题…

下一步,选择菜单…等一下,好像还有什么遗漏,对了,我们还必须为<SELECT>对象的onchange事件添加程序代码:

 

好了,我们再检查一下,还有没有什么遗漏。从第一个下拉菜单中选择单位,立即,第二个下拉菜单和第三个下拉菜单都发生了变化,看看是不是想要的。(不是?呵呵,回头好好检查);再在第二个下拉菜单中选择部门,看看员工的下拉菜单是否跟着改变?
恭喜你,你已经成功的实现了三维下拉菜单。其实,对于二维菜单,实现的方法完全一致。读者完全可以利用本文的方法实现WEB项目菜单的全攻略。以后再遇到类似的问题,我想这回你一定可以毫不犹豫的说,让我来搞定它。

function SetSubMenu(pSelect){
var oOption, sValue;
if (pSelect.selectedIndex < 0) return;
switch (pSelect.name){
case "s0":
var TD = GetParent(document.all("s1"), "TD");
TD.innerHTML = MakeMenu(arrDept, GetSelectValue("s0"), "0", "s1", 0);
TD = GetParent(document.all("s2"), "TD");
TD.innerHTML = MakeMenu(arrEmp, GetSelectValue("s1"), "0", "s2", 0);
break;
case "s1":
var TD = GetParent(document.all("s2"), "TD");
TD.innerHTML = MakeMenu(arrEmp, GetSelectValue("s1"), "0", "s2", 0);
break;
default:
}
}

function GetSelectValue(oSelect){
if (oSelect.selectedIndex < 0) return 0;
return oSelect.options(oSelect.selectedIndex).value;
}

function MakeMenu(arrSub, pValue, cValue, name, bulSkip){
var sHTML = "<select name='" + name + "' onchange='SetSubMenu(this)' >";
if (bulSkip) sHTML += "<option value=0><未选择></option>";
for (var i=0; i < arrSub.length; i++){
if (arrSub[i][0]==pValue){
var tag = (arrSub[i][1]==cValue)?" selected>":">";
sHTML += "<option value='" + arrSub[i][1] + "'" + tag + arrSub[i][2] + "</option>";
}
}
sHTML += "</select>";
return sHTML;
}

function body_onload(){
var TD = GetParent(document.all("s0"), "TD");
TD.innerHTML = MakeMenu(arrUnit, 0, 0, "s0", 1);
TD = GetParent(document.all("s1"), "TD");
TD.innerHTML = MakeMenu(arrDept, GetSelectValue(document.all("s0")), 0, "s1", 1);
TD = GetParent(document.all("s2"), "TD");
TD.innerHTML = MakeMenu(arrEmp, GetSelectValue(document.all("s1")), 0, "s2", 1);
}

<BODY BGCOLOR="#FFFFFF" ONLOAD="body_onload()">
...
<TD>
<SELECT NAME="s0" ONCHANGE="SetSubmenu(this)"></SELECT>
</TD>
<TD>
<SELECT NAME="s1" ONCHANGE="SetSubmenu(this)"></SELECT>
</TD>
<TD>
<SELECT NAME="s2" ONCHANGE="SetSubmenu(this)"></SELECT>
</TD>
</BODY>

相关文章推荐

超实用的JavaScript代码段 Item2 --伸缩菜单栏

伸缩菜单栏点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来。 Document *{margin:0; pad...

JavaScript制作简单的三级联动菜单实例代码

本文给大家分享的是使用javascript实现的一个简单的三级联动菜单,非常简单实用,有需要的小伙伴过来参考下吧。 用javascript制作的一个简单三级联动,非常简单实用 ...
  • xz_src
  • xz_src
  • 2017年06月25日 16:27
  • 681

通用的二级菜单代码(css+javascript)

其实,无论是什么样的二级菜单,原理都是一样的:  1、每一个一级菜单都会对应一个层,而这个层里放着的就是该一级菜单对应的二级菜单。  2、默认情况下,二级菜单这个层是隐藏的,在CSS中将层的dis...

javascript控制的下拉菜单

  • 2009年12月10日 14:20
  • 4KB
  • 下载

从零开始学_JavaScript_系列(八)——js系列<2>(事件触发顺序、文本读取、js编写ajax、输入验证、下拉菜单)

(20)事件触发的顺序 假如文档中有多个脚本(例如自动执行的脚本),那么他们执行是有一定的顺序的(在HTML文档之中): ①先执行内的标签。因此,这里的js脚本通常是嵌入代码、指向JS文件,可以在这里...

jQuery_Javascript_css菜单选择对应模块显示隐藏

这个是在原来的基础上增加了一个显示页面。实现点击菜单选择对应模块的显示隐藏。很劣质就是拉。 把代码复制到w3的测试地方就可以快速查看实现的模式。 查看器地址:http://www.w3school...

编写横向菜单的HTML代码架构

第一步、编写横向菜单的HTML代码架构 请将以下代码添加到HTML文档的导航栏区域中。 menu"> Baidu.Com Code52.Net Yahoo.Com Google.C...

Android的选项菜单,用代码编写

只需要在主函数里写,不需要在配置文件编写了!!!

黑马程序员_WPF(菜单Menu与DockPanel,Toolbar,多窗体,Openfiledalog 与Savefiledalog,自己编写代码进行加载图片)

一.菜单Menu与DockPanel                                       文件">                     新建">       ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:编写JavaScript代码,控制菜单的显示
举报原因:
原因补充:

(最多只允许输入30个字)