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

最新推荐文章于 2022-08-05 14:51:16 发布

zcd_137

最新推荐文章于 2022-08-05 14:51:16 发布

阅读量1.4k

点赞数

文章标签： javascript function html 数据库 table asp

本文链接：https://blog.csdn.net/zcd_137/article/details/815772

版权

四、编写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定义，先看看函数定义：

代码拷贝框
function MakeMenu(arrSub, pValue, cValue, name, bulSkip){ var sHTML = "<select name='" + name + "' οnchange='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。

那么，当用户加载页面之后，首先运行的就是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 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);
}

zcd_137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
编写JavaScript代码，控制菜单的显示

四、编写JavaScript代码，控制菜单的显示其实有经验的程序员，读到这里应该知道如何进行下去。但您不妨读下去，也许，笔者的方法对您未必不是一种新的尝试。而且，据我猜测，读我这篇文章的大多数都是没有经验的程序员，呵呵，帮人帮到底吧。Come On, Lets Go.让菜单显示出来，其实有好几种思路。利用ASP等程序直接生成结构、利用OPTION对象的ADD和Remove方法动态添加和改变等
复制链接

扫一扫