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

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

文章中所介紹的php的作用，一是用來從資料庫(kù)中提取選單選項(xiàng)，另一個(gè)作用，就是用來產(chǎn)生javascript程式碼。讀者可以採(cǎi)用自己熟悉的解釋型語(yǔ)言，如asp。

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

//主選單設(shè)計(jì)?

焦點(diǎn)新聞?

生活時(shí)尚?

心情故事?

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

?

//子選單設(shè)計(jì)?

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

function setmenu(){?

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

php //開始php程式?

$db = new my_db();?

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

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

for ($i=0;$i
$id = $mmenu[$ i];?

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

//假設(shè)選單選項(xiàng)存放在class表的menu字段，menuid用來識(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)合陣列的填入?

unset($smenu); //刪除smenu變數(shù)?

}?

}?

?> //結(jié)束php程式?

}?

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

obj.text=arr_class[i];?

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

}?

}?

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

最後，筆者簡(jiǎn)單介紹一下，如何實(shí)現(xiàn)在表單提交後，仍然保持選單項(xiàng)目上一次的狀態(tài)。技巧其實(shí)很多，筆者採(cǎi)用的是隱含變數(shù)法。在表單中加入以下程式碼：?

?

?

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

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

?>?

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