编写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代码

在浏览器控制台写JavaScript代码时,用Shift+Enter实现换行,而不是Enter实现换行。...
  • exertion01
  • exertion01
  • 2017年11月30日 10:23
  • 143

js实现简单的隐藏导航菜单动态显示

js实现简单的隐藏导航菜单动态显示
  • TuFu_ooo
  • TuFu_ooo
  • 2017年10月16日 15:32
  • 227

用javascript实现菜单子选项的隐藏和显示

任务要求: 点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来。 Document *{margin:0; ...
  • ssisse
  • ssisse
  • 2016年04月19日 08:20
  • 824

用javascript 实现网页鼠标右键弹出菜单功能

工作中需要实现在网页上点右键弹出简单菜单的功能,在网上找了一些例子,都比较复杂,其实我这边只需要实现简单的菜单功能,两个选项,用户点击了以后实现一些简单的ajax功能。于是根据思路,用DOM创建一个菜...
  • batman9956
  • batman9956
  • 2011年02月25日 04:32
  • 3525

编写高质量JavaScript代码的一些建议

在Medium上看到了两篇关于写高质量JavaScript代码的文章,觉得不错,特此搬过来,记下一笔,以待后续查阅。 JavaScript 作为最受欢迎的编程语言之一,被广泛应用在各个领域:网站...
  • anythings
  • anythings
  • 2016年04月23日 18:42
  • 239

Effective JavaScript:编写高质量JavaScript代码的68个有效方法(1-2章)

第1章 让自己习惯JavaScript JavaScript最初设计令人感觉亲切。由于其语法让人联想到Java,并且具有许多脚本语言的共同特性(如函数、数组、字典和正则表达式),因此,具有少量编程经验...
  • qq_34543438
  • qq_34543438
  • 2017年05月31日 17:13
  • 365

汇编程序:简单的菜单

【任务】编制一个菜单程序,在屏幕上显示如下信息: MENU 1. FILE 2. EDIT' 3. COMPILE'...
  • sxhelijian
  • sxhelijian
  • 2017年05月13日 21:49
  • 922

通过权限控制菜单栏菜单的显示和隐藏

java后台: //获得用户 User user = account.getUserid(); //获取权限 String roles = account.getRoles(); //获取权...
  • u013166918
  • u013166918
  • 2015年07月10日 16:22
  • 534

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

第一步、编写横向菜单的HTML代码架构 请将以下代码添加到HTML文档的导航栏区域中。 menu"> Baidu.Com Code52.Net Yahoo.Com Google.C...
  • u010235841
  • u010235841
  • 2013年11月20日 11:51
  • 1059

详解用JavaScript实现"树形菜单"效果

网页里的树形菜单有两种实现方式:一种是结合后台(JSP/Struts2等), 每次下载不同的数据来刷新页面,实现树形菜单的效果。另一种是由纯JavaScript方式来实现,在树形菜单的工作过程中,不会...
  • iamshaofa
  • iamshaofa
  • 2012年08月02日 14:44
  • 4240
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:编写JavaScript代码,控制菜单的显示
举报原因:
原因补充:

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