JavaScript＋PHP 應(yīng)用一：網(wǎng)頁(yè)制作中雙下拉菜單的動(dòng)態(tài)實(shí)現(xiàn)

---摘自互聯(lián)網(wǎng)

在網(wǎng)頁(yè)制作中，常常遇到這種情況，通過(guò)主下拉菜單的選擇，動(dòng)態(tài)的生成子下拉菜單。例如：在主菜單中有“焦點(diǎn)新聞”、“生活時(shí)尚”、“心情故事”三個(gè)選項(xiàng)，通過(guò)“焦點(diǎn)新聞”的選擇，子菜單自動(dòng)生成如“國(guó)內(nèi)”、“國(guó)際”、“體育”、“文娛”，依此類(lèi)推。

利用javascript，我們可以輕松實(shí)現(xiàn)上述效果。但問(wèn)題是，如果菜單中的選項(xiàng)是從數(shù)據(jù)庫(kù)（或其他文件）中動(dòng)態(tài)提取，實(shí)現(xiàn)起來(lái)就并不是輕而易舉的了。筆者根據(jù)自己的實(shí)際經(jīng)驗(yàn)，向大家介紹一種利用javascript ＋ php的實(shí)現(xiàn)方法，文中的數(shù)據(jù)庫(kù)采用mysql。在本例中，筆者還將介紹在每一次表單提交之后，如何返回上一次菜單選項(xiàng)的選擇狀態(tài)。

文章中所介紹的php的作用，一是用來(lái)從數(shù)據(jù)庫(kù)中提取菜單選項(xiàng)，另一作用，就是用來(lái)生成javascript代碼。讀者可以采用自己熟悉的解釋型語(yǔ)言，如asp。

為了簡(jiǎn)化代碼，筆者假設(shè)主菜單已經(jīng)通過(guò)html構(gòu)造，由于子菜單需要?jiǎng)討B(tài)設(shè)計(jì)，所以只繪制了基本框架，html代碼如下：

<select name="mmenu" onchange="java script:setmenu()"> //主菜單設(shè)計(jì)

<option value="a">焦點(diǎn)新聞</option>

<option value="b">生活時(shí)尚</option>

<option value="c">心情故事</option>

//value必須與下文的menu數(shù)組相一致

</select>

<select name="smenu"> //子菜單設(shè)計(jì)

</select>

我們需要考慮的是，菜單的onchange()事件需要完成哪些步驟。其大致過(guò)程是，根據(jù)主菜單的選項(xiàng)，構(gòu)造子菜單項(xiàng)目。而子菜單的項(xiàng)目文字最好事先設(shè)定。根據(jù)這個(gè)思路，筆者采用了javascript中的聯(lián)合數(shù)組記錄子菜單選項(xiàng)，并由php在加載時(shí)自動(dòng)生成。由此，筆者設(shè)計(jì)了如下的javascript函數(shù)setmenu()：

function setmenu(){

menu=array("a","b","c"); //構(gòu)造menu聯(lián)合數(shù)組

<?php //開(kāi)始php程序

$db = new my_db();

$db->database = "***"; //構(gòu)造新的mysql連接，這里使用了phplib

$mmenu = array("a","b","c"); //這里筆者作了簡(jiǎn)化

for ($i=0;$i<count($mmenu);$i++){

$id = $mmenu[$i];

$db->query("select menu from class where menuid ='".$id."'");

//假設(shè)菜單選項(xiàng)存放在class表的menu字段，menuid用來(lái)標(biāo)識(shí)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聯(lián)合數(shù)組的填充

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

}

}

?> //結(jié)束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); //需要清除原有的項(xiàng)目

}

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

}

}

}

這樣每次顯示文檔時(shí)，php部分將解釋為javascript語(yǔ)言，當(dāng)單擊主菜單時(shí)，子菜單將自動(dòng)更新。同樣道理，讀者可以根據(jù)此思路，創(chuàng)造更復(fù)雜的多重菜單選項(xiàng)。

最后，筆者簡(jiǎn)要介紹一下，如何實(shí)現(xiàn)在表單提交后，仍然保持菜單項(xiàng)上一次的狀態(tài)。技巧其實(shí)很多，而筆者采用的是隱含變量法。在表單中添加如下代碼：

<input type="hidden" name="h1">

<input type="hidden" name="h2">

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

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

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

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

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

?>

至此，我們已經(jīng)實(shí)現(xiàn)雙下拉菜單的動(dòng)態(tài)實(shí)現(xiàn)方法。