在網頁制作中，常常遇到這種情況，通過主下拉菜單的選擇，動態的生成子下拉菜單。例如︰在主菜單中有“焦點新聞”、“生活時尚”、“心情故事”三個選項，通過“焦點新聞”的選擇，子菜單自動生成如“國內”、“國際”、“體育”、“文娛”，依此類推。
利用JavaScript，我們可以輕松實現上述效果。但問題是，如果菜單中的選項是從數據庫（或其他文件）中動態提取，實現起來就並不是輕而易舉的了。筆者根據自己的實際經驗，向大家介紹一種利用JavaScript ＋ PHP的實現方法，文中的數據庫采用MySQL。在本例中，筆者還將介紹在每一次表單提交之後，如何返回上一次菜單選項的選擇狀態。
文章中所介紹的PHP的作用，一是用來從數據庫中提取菜單選項，另一作用，就是用來生成JavaScript代碼。讀者可以采用自己熟悉的解釋型語言，如ASP。
為了簡化代碼，筆者假設主菜單已經通過HTML構造，由于子菜單需要動態設計，所以只繪制了基本框架，HTML代碼如下︰
<select name="mmenu" onChange="javascript:setMenu()"> //主菜單設計
<option value="a">焦點新聞</option>
<option value="b">生活時尚</option>
<option value="c">心情故事</option>
//value必須與下文的menu數組相一致
</select>
<select name="smenu"> //子菜單設計
</select>
我們需要考慮的是，菜單的OnChange()事件需要完成哪些步驟。其大致過程是，根據主菜單的選項，構造子菜單項目。而子菜單的項目文字最好事先設定。根據這個思路，筆者采用了JavaScript中的聯合數組記錄子菜單選項，並由PHP在加載時自動生成。由此，筆者設計了如下的JavaScript函數setMenu()︰
function setMenu(){
menu=Array("a","b","c"); //構造menu聯合數組
<?php //開始PHP程序
$DB = new My_DB();
$DB->Database = "***"; //構造新的MySQL連接，這里使用了PHPLIB
$mmenu = array("a","b","c"); //這里筆者作了簡化
for ($i=0;$i<count($mmenu);$i++){
$id = $mmenu[$i];
$DB->query("select menu from class where menuid ='".$id."'");
//假設菜單選項存放在class表的menu字段，menuid用來標識menu
while ($DB->next_record()){
$smenu[] = "\"".$DB->f("menu")."\"";
}
if (isset($smenu) && is_array($smenu)){
$str = implode(",",$smenu);
echo "menu[\"$id\"] =Array($str);\n\t\t";
//完成menu聯合數組的填充
unset($smenu); //刪除smenu變量
}
}
?> //結束PHP程序
with (document) {
id=all("mmenu").value; //獲得主菜單的value值
arr_menu=menu[id];
for(i=all("smenu").options.length;i>=0;i--){
all("smenu").options.remove(i); //需要清除原有的項目
}
if (arr_menu.length==0){
return;
}
for(i=0;i<arr_menu.length;i++){
obj=createElement("option");
obj.text=arr_class[i];
all("smenu").options.add(obj);
}
}
}
這樣每次顯示文檔時，PHP部分將解釋為Javascript語言，當單擊主菜單時，子菜單將自動更新。同樣道理，讀者可以根據此思路，創造更復雜的多重菜單選項。
最後，筆者簡要介紹一下，如何實現在表單提交後，仍然保持菜單項上一次的狀態。技巧其實很多，而筆者采用的是隱含變量法。在表單中添加如下代碼︰
<input type="hidden" name="h1">
<input type="hidden" name="h2">
我們只需要在Form表單的OnSubmit()事件中給每個隱含變量賦值即可。即︰
document.all("h1").value=document.all("mmenu").selectedIndex;
document.all("h2").value=document.all("smenu").selectedIndex;
為了利用隱含變量，在文檔的Body的onLoad()事件中，我們利用PHP方法（也可用其它方法）來控制菜單的顯示︰
<?php
if (!isset($h1)){ //只需要判斷$h1
$h1 = 0;
$h2 = 0;
}
echo "document.all(\"mmenu\").selectedIndex=".$h1.";\n\t\t";
echo "document.all(\"mmenu\").click();\n\t\t";
echo "document.all(\"mmenu\").selectedIndex=".$h1.";\n\t\t";
echo "document.all(\"smenu\").selectedIndex=".$h2;
?>
至此，我們已經實現雙下拉菜單的動態實現方法。