|
四、编写JavaScript代码，控制菜单的显示
其实有经验的程序员，读到这里应该知道如何进行下去。但您不妨读下去，也许，笔者的方法对您未必不是一种新的尝试。而且，据我猜测，读我这篇文章的大多数都是没有经验的程序员，呵呵，帮人帮到底吧。Come On, Let's Go.
让菜单显示出来，其实有好几种思路。利用ASP等程序直接生成<SELECT>结构、利用OPTION对象的ADD和Remove方法动态添加和改变等等，都是可以使用的方法。但，经过笔者的多次实践和摸索，有一种方法更为有效，那就是利用Script代码动态的改写整个<SELECT>框架。
好，就让我们从加载页面（document）开始，一步一步的讲解JavaScript代码到底是如何控制菜单的显示的。
既然有三个菜单，那么我们就得事先设计出这样的HTML代码（其实要不要无所谓，放在那里只是为了便于理解）：
<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>
您有可能要问，这里怎么什么数据都没有？不要奇怪，等一下您自然就会明白。我们来看一下<BODY>对象的ONLOAD事件body_onload()做了些什么工作？
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);
}
让我们来研究一下。首先程序利用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定义，先看看函数定义：
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;
}
代码拷贝框
[Ctrl+A 全部选择 然后拷贝]
来看一下参数的含义。arrSub，指的是菜单数据的来源，其实就是我们上文定义的数组；pValue，指定父结点的编号，根据这个编号，我们可以找出所有的子结点数据；cValue，指定菜单的默认显示项；name，指定产生的<SELECT>菜单的名称；bulSkip，指定菜单的默认显示项是"<未选择>"还是具体数据。
GetSelectValue()函数的目的，就是取得<SELECT>对象当前显示的值。如果没有显示任何值，函数返回0。
function GetSelectValue(oSelect){
if (oSelect.selectedIndex < 0) return 0;
return oSelect.options(oSelect.selectedIndex).value;
}
那么，当用户加载页面之后，首先运行的就是body_onload()函数，该函数根据已经产生的JavaScript多维数组，利用MakeMenu()函数动态的生成菜单的HTML代码，并根据DHTML的原理加载到页面中。OK，运行一下页面，看看菜单是否正常显示？如果有什么问题，抓紧时间好好调试一下，例如数据库的连接是否正常，javascript代码的大小写是否正确，数组的定义是否有什么问题…
下一步，选择菜单…等一下，好像还有什么遗漏，对了，我们还必须为<SELECT>对象的onchange事件添加程序代码：
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:
}
}
好了，我们再检查一下，还有没有什么遗漏。从第一个下拉菜单中选择单位，立即，第二个下拉菜单和第三个下拉菜单都发生了变化，看看是不是想要的。（不是？呵呵，回头好好检查）；再在第二个下拉菜单中选择部门，看看员工的下拉菜单是否跟着改变？
恭喜你，你已经成功的实现了三维下拉菜单。其实，对于二维菜单，实现的方法完全一致。读者完全可以利用本文的方法实现WEB项目菜单的全攻略。以后再遇到类似的问题，我想这回你一定可以毫不犹豫的说，让我来搞定它。
出处：蓝色理想
责任编辑：moby
上一页 web关联菜单实现方法 [1] 下一页
◎进入论坛网络编程版块参加讨论
|
第 1 页 
第 2 页 web关联菜单实现方法 [2]
