JavaScript+PHP應用一：網頁制作中雙下拉菜單的動態(tài)實現

1、JavaScript PHP 應用一：網頁制作中雙下拉菜單的動態(tài)實現- 摘自互聯(lián)網在網頁制作中，常常遇到這種情況，通過主下拉菜單的選擇，動態(tài)的生成子下拉菜單。例如：在主菜單中 有“焦點新聞”、“生活時尚”、“心情故事”三個選項，通過“焦點新聞”的選擇，子菜單自動生成如 “國內”、“國際”、“體育”、“文娛”，依此類推。利用 javascript ，我們可以輕松實現上述效果。但問題是，如果菜單中的選項是從數據庫(或其他文件)中動態(tài)提取，實現起來就并不是輕而易舉的了。筆者根據自己的實際經驗，向大家介紹一種利用javascript php 的實現方法，文中的數據庫采用 mysql 。在本例中，筆者還

2、將介紹在每一次表單提交之后，如何返回上一次菜單選項的選擇狀態(tài)。文章中所介紹的 php 的作用，一是用來從數據庫中提取菜單選項，另一作用，就是用來生成 javascript代碼。讀者可以采用自己熟悉的解釋型語言，如asp。為了簡化代碼，筆者假設主菜單已經通過 html 構造，由于子菜單需要動態(tài)設計，所以只繪制了基本框架， html 代碼如下： / 主菜單設計 焦點新聞 生活時尚 心情故事 /value必須與下文的menu數組相一致 / 子菜單設計我們需要考慮的是，菜單的 onchange() 事件需要完成哪些步驟。其大致過程是，根據主菜單的選項，構 造子菜單項目。而子菜單的項目文字最好事先設定。

3、根據這個思路，筆者采用了 javascript 中的聯(lián)合數 組記錄子菜單選項，并由 php 在加載時自動生成。由此，筆者設計了如下的 javascript 函數 setmenu() ：functionsetmenu()menu=array(a,b,c);/ 構造 menu聯(lián)合數組database =*;/ 構造新的 mysql 連接，這里使用了 phplib$mmenu =array(a,b,c);/ 這里筆者作了簡化for ($i=0;$iquery(selectmenu from classwhere menuid =.$id.);/假設菜單選項存放在 class表的menu字段，menu

4、id用來標識menuwhile ($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 變量? / 結束 php 程序with (document) id=all(mmenu).value;/ 獲得主菜單的 value 值arr_menu=menuid;for(i=all(smenu).options.length

5、;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_classi;all(smenu).options.add(obj);這樣每次顯示文檔時，php 部分將解釋為 javascript 語言，當單擊主菜單時，子菜單將自動更新。同樣道理，讀者可以根據此思路，創(chuàng)造更復雜的多重菜單選項。最后，筆者簡要介紹一下，如何實現在表單提交后，仍然保持菜單項上一次的狀態(tài)。技巧其實很多，而筆者采用的是隱含變量法。在表單中添加如下代碼：我們只需要在 form 表單的 onsubmit() 事件中給每個隱含變量賦值即可。即：document.all(h1).value=document.all(mmenu).selectedindex; document.all(h2).value=document.all(smenu).selec