|
四、編寫JavaScript代碼，控制菜單的顯示
其實(shí)有經(jīng)驗(yàn)的程序員，讀到這里應(yīng)該知道如何進(jìn)行下去。但您不妨讀下去，也許，筆者的方法對您未必不是一種新的嘗試。而且，據(jù)我猜測，讀我這篇文章的大多數(shù)都是沒有經(jīng)驗(yàn)的程序員，呵呵，幫人幫到底吧。Come On, Let's Go.
讓菜單顯示出來，其實(shí)有好幾種思路。利用ASP等程序直接生成<SELECT>結(jié)構(gòu)、利用OPTION對象的ADD和Remove方法動態(tài)添加和改變等等，都是可以使用的方法。但，經(jīng)過筆者的多次實(shí)踐和摸索，有一種方法更為有效，那就是利用Script代碼動態(tài)的改寫整個<SELECT>框架。
好，就讓我們從加載頁面（document）開始，一步一步的講解JavaScript代碼到底是如何控制菜單的顯示的。
既然有三個菜單，那么我們就得事先設(shè)計(jì)出這樣的HTML代碼（其實(shí)要不要無所謂，放在那里只是為了便于理解）：
<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>
您有可能要問，這里怎么什么數(shù)據(jù)都沒有？不要奇怪，等一下您自然就會明白。我們來看一下<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()函數(shù)取得s0的容器TD對象句柄，然后，利用MakMenu()函數(shù)產(chǎn)生菜單代碼，并把代碼賦值給剛才取得的TD對象；然后是s1，接著是s2.。GetParent()函數(shù)定義如下：
function GetParent(src, tag){
if (src && src.tagName!=tag){
return(GetParent(src.parentElement, tag));
}
return src;
}
這里的tag參數(shù)必須大寫，例如TD、TR、TABLE，函數(shù)返回的是離src指定的元素最近的由tag標(biāo)簽定義的父對象。
我們要特別說明一下MakeMenu()函數(shù)，這個函數(shù)的作用不言而喻--產(chǎn)生菜單的HTML定義，先看看函數(shù)定義：
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 全部選擇 然后拷貝]
來看一下參數(shù)的含義。arrSub，指的是菜單數(shù)據(jù)的來源，其實(shí)就是我們上文定義的數(shù)組；pValue，指定父結(jié)點(diǎn)的編號，根據(jù)這個編號，我們可以找出所有的子結(jié)點(diǎn)數(shù)據(jù)；cValue，指定菜單的默認(rèn)顯示項(xiàng)；name，指定產(chǎn)生的<SELECT>菜單的名稱；bulSkip，指定菜單的默認(rèn)顯示項(xiàng)是"<未選擇>"還是具體數(shù)據(jù)。
GetSelectValue()函數(shù)的目的，就是取得<SELECT>對象當(dāng)前顯示的值。如果沒有顯示任何值，函數(shù)返回0。
function GetSelectValue(oSelect){
if (oSelect.selectedIndex < 0) return 0;
return oSelect.options(oSelect.selectedIndex).value;
}
那么，當(dāng)用戶加載頁面之后，首先運(yùn)行的就是body_onload()函數(shù)，該函數(shù)根據(jù)已經(jīng)產(chǎn)生的JavaScript多維數(shù)組，利用MakeMenu()函數(shù)動態(tài)的生成菜單的HTML代碼，并根據(jù)DHTML的原理加載到頁面中。OK，運(yùn)行一下頁面，看看菜單是否正常顯示？如果有什么問題，抓緊時間好好調(diào)試一下，例如數(shù)據(jù)庫的連接是否正常，javascript代碼的大小寫是否正確，數(shù)組的定義是否有什么問題…
下一步，選擇菜單…等一下，好像還有什么遺漏，對了，我們還必須為<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:
}
}
好了，我們再檢查一下，還有沒有什么遺漏。從第一個下拉菜單中選擇單位，立即，第二個下拉菜單和第三個下拉菜單都發(fā)生了變化，看看是不是想要的。（不是？呵呵，回頭好好檢查）；再在第二個下拉菜單中選擇部門，看看員工的下拉菜單是否跟著改變？
恭喜你，你已經(jīng)成功的實(shí)現(xiàn)了三維下拉菜單。其實(shí)，對于二維菜單，實(shí)現(xiàn)的方法完全一致。讀者完全可以利用本文的方法實(shí)現(xiàn)WEB項(xiàng)目菜單的全攻略。以后再遇到類似的問題，我想這回你一定可以毫不猶豫的說，讓我來搞定它。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 web關(guān)聯(lián)菜單實(shí)現(xiàn)方法 [1] 下一頁
◎進(jìn)入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁 
第 2 頁 web關(guān)聯(lián)菜單實(shí)現(xiàn)方法 [2]
