JavaScript＋PHP應用一：網頁製作中雙下拉選單的動態實現

在網頁製作中，常常遇到這種情況，透過主下拉選單的選擇，動態的生成子下拉選單。例如：在主選單中有「焦點新聞」、「生活時尚」、「心情故事」三個選項，透過「焦點新聞」的選擇，子選單自動產生如「國內」、「國際」、「體育」、 “文娛”，依此類推。 

利用javascript，我們可以輕鬆達到上述效果。但問題是，如果選單中的選項是從資料庫（或其他文件）動態提取，實現起來就並不是輕而易舉的了。作者根據自己的實際經驗，向大家介紹一種利用javascript ＋ php的實作方法，文中的資料庫採用mysql。在本例中，筆者也會介紹在每一次表單提交之後，如何返回上一次選單選項的選擇狀態。 

文章中所介紹的php的作用，一是用來從資料庫中提取選單選項，另一個作用，就是用來產生javascript程式碼。讀者可以採用自己熟悉的解釋型語言，如asp。

為了簡化程式碼，筆者假設主選單已經通過html構造，由於子選單需要動態設計，所以只繪製了基本框架，html程式碼如下： 

//主選單設計 焦點新聞 生活時尚 心情故事 //value必須與下文的menu數組相符  

//子選單設計 考慮的是，選單的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
$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);ntt"; 
完成
/完成menu聯合陣列的填入 

unset($smenu); //刪除smenu變數 

} 

} 

?> //結束php程式 

} 

?> //結束php程式 
.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
obj=createelement("option"); 

obj.text=arr_class[i]; 

all("smenu").options.add(obj); } 

} 

} 

這樣每次顯示文件時，php部分將解釋為javascript語言，當點擊主選單時，子選單將自動更新。同樣道理，讀者可以根據此思路，創造更複雜的多重選單選項。 

最後，筆者簡單介紹一下，如何實現在表單提交後，仍然保持選單項目上一次的狀態。技巧其實很多，筆者採用的是隱含變數法。在表單中加入以下程式碼： 

 

 

我們只需要在form表單的onsubmit()事件中給每個隱含變數賦值即可。即： 

document.all("h1").value=document.all("mmenu").selectedindex; 

document.all("h2").value=document.all("smenu").selectedindex; 

為了利用隱含變量，在文檔的body的onload()事件中，我們利用php方法（也可用其它方法）來控制選單的顯示： 


if (!isset($h1)){ //只需要判斷$h1 

$h1 = 0; 

$h2 = 0; echo "document.all("mmenu").selectedindex=".$h1.";ntt"; 

echo "document.all("mmenu").click();ntt"; 

echo "document.all ("mmenu").selectedindex=".$h1.";ntt"; 

echo "document.all("smenu").selectedindex=".$h2; 

?> 

至此，我們已經實現雙至此，我們已經實現雙至此下拉式選單的動態實作方法。