JavaScript＋PHP應用一：網頁製作中雙下拉式功能表的動態實現(轉貼)_PHP

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聯合數組


$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程式

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
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;

?>

至此，我們已經實現雙下拉式功能表的動態實現方法。

