對這文章發表回應

發表限制: 非會員 可以發表

發表者：冷日發表時間： 2010/3/16 16:53:45

必學!動態二階選單(雙層選單)

發表人：直角兄發表分類於： JavaScript, 網頁與資料庫(HTML/CSS/SQL)瀏覽： 9,013人次

相信大家都看過一種下拉式選單，當第一個選單選擇之後，第二個選單便會隨之跟著改變，如果還是不慎了解的話，請至郵局的【 3+2郵遞區號查詢】，其中的「縣市/鄉鎮【市】區」便是最好的例子了，這種類型的選單，我們稱其為「動態二階選單」或是「動態雙層選單
」。

不過說實在的，當在 Google 中蒐尋半天還是找不到合用的二階選單，沒想到最後居然是在「網站建置百寶箱」內找到的，實在是慚愧啊!!! 由於網站建置百寶箱有非常完整的介紹與程式範例，因此直角就不再針對程式進行講解，請各位網友自行前往參考。

garyfu 前輩所提供的範例，就是最典型的二階選單。不過在這個範例中，需要額外用到一個 zipcode 的表單變數，在往後進行網頁維護的時候，有可能會造成一點點的不方便。解決方式是將所有的動態選單內容全數儲存於 Javascript 的陣列變數中即可，不過留待以後再另行介紹。

然而事實上，二階選單雖然是最常用的情況，但也會有三階
、四階、或更多階選單應用的情況發生，因此，cttlee 前輩提供了以下方法：

cttlee 前輩提供的方法，是建立在資料庫的基礎上，各位網友可得用心好好揣摩揣摩。這種方法的好處是不用更新網頁，只要更新資料庫的資料，選單就會跟著改變。

當然了，如果給一成不變的選單增加一些變化，便可以讓使用者們更容易、更快速地選擇他們所要選的項目，請參考以下資料：

最後，如果你一點程式都不懂的話，或是想節省許多的時間，沒關係，網路上有所謂的「下拉式選單產生器」喔！雖然不是動態二階選單，但是只要輸入選單的內容，再輸入欲前往的網址，就會自動產生出選單的程式喔！非常方便，推鑒給大家！

最後更新日期: 2009-03-10