本文介紹了雙下拉菜單的動態(tài)實現(xiàn)的代碼，例如：在主菜單中有“焦點新聞”、“生活時尚”、“心情故事”三個選項，通過“焦點新聞”的選擇，子菜單自動生成如“國內(nèi)”、“國際”、“體育”、“文娛”，依此類推。
利用javascript，我們可以輕松實現(xiàn)上述效果。但問題是，如果菜單中的選項是從數(shù)據(jù)庫（或其他文件）中動態(tài)提取，實現(xiàn)起來就并不是輕而易舉的了。筆者根據(jù)自己的實際經(jīng)驗，向大家介紹一種利用javascript ＋ php的實現(xiàn)方法，文中的數(shù)據(jù)庫采用mysql。在本例中，筆者還將介紹在每一次表單提交之后，如何返回上一次菜單選項的選擇狀態(tài)。
文章中所介紹的php的作用，一是用來從數(shù)據(jù)庫中提取菜單選項，另一作用，就是用來生成javascript代碼。讀者可以采用自己熟悉的解釋型語言，如asp。
為了簡化代碼，假設(shè)主菜單已經(jīng)通過html構(gòu)造，由于子菜單需要動態(tài)設(shè)計，所以只繪制了基本框架，html代碼如下：
select name="mmenu" onchange="java script:setmenu()"> //主菜單設(shè)計
option value="a">焦點新聞/option>
option value="b">生活時尚/option>
option value="c">心情故事/option>
//value必須與下文的menu數(shù)組相一致
/select>
select name="smenu"> //子菜單設(shè)計
/select>
我們需要考慮的是，菜單的onchange()事件需要完成哪些步驟。其大致過程是，根據(jù)主菜單的選項，構(gòu)造子菜單項目。而子菜單的項目文字最好事先設(shè)定。根據(jù)這個思路，筆者采用了javascript中的聯(lián)合數(shù)組記錄子菜單選項，并由php在加載時自動生成。由此，筆者設(shè)計了如下的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"); //這里筆者作了簡化
for ($i=0;$icount($mmenu);$i++){
$id = $mmenu[$i];
$db->query("select menu from class where menuid ='".$id."'");
//假設(shè)菜單選項存放在class表的menu字段，menuid用來標(biāo)識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); //需要清除原有的項目
}
if (arr_menu.length==0){
return;
}
for(i=0;iarr_menu.length;i++){
obj=createelement("option");
obj.text=arr_class[i];
all("smenu").options.add(obj);
}
}
這樣每次顯示文檔時，php部分將解釋為javascript語言，當(dāng)單擊主菜單時，子菜單將自動更新。同樣道理，讀者可以根據(jù)此思路，創(chuàng)造更復(fù)雜的多重菜單選項。
最后，筆者簡要介紹一下，如何實現(xiàn)在表單提交后，仍然保持菜單項上一次的狀態(tài)。技巧其實很多，而筆者采用的是隱含變量法。在表單中添加如下代碼：
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.";ntt";
echo "document.all("mmenu").click();ntt";
echo "document.all("mmenu").selectedindex=".$h1.";ntt";
echo "document.all("smenu").selectedindex=".$h2;
?>
至此，我們已經(jīng)實現(xiàn)雙下拉菜單的動態(tài)實現(xiàn)方法。
您可能感興趣的文章:- PHP導(dǎo)航下拉菜單的實現(xiàn)如此簡單
- thinkphp實現(xiàn)面包屑導(dǎo)航（當(dāng)前位置）例子分享
- php實現(xiàn)面包屑導(dǎo)航例子分享
- php可應(yīng)用于面包屑導(dǎo)航的遞歸尋找家譜樹實現(xiàn)方法
- 簡單的用PHP編寫的導(dǎo)航條程序
- ThinkPHP使用心得分享-ThinkPHP + Ajax 實現(xiàn)2級聯(lián)動下拉菜單
- jQuery+PHP+MySQL二級聯(lián)動下拉菜單實例講解
- php 三級聯(lián)動菜單
- 用php+javascript實現(xiàn)二級級聯(lián)菜單的制作
- PHP+JS三級菜單聯(lián)動菜單實現(xiàn)方法
- php+jQuery實現(xiàn)的三級導(dǎo)航欄下拉菜單顯示效果
