Zum Inhalt springen

My Personal Site Ver.5
2008 年 12 月 08 日

動態 N 階選單 By Dreamweaver & PHP MySQL 終極版

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4.75 out of 5)
Loading ... Loading ...

很久以前曾經做過一篇 動態兩階選單 的文章，但基本上並不算是一個完成體，因為若真的要拿來用會需要再克服一些問題，今天的很不一樣，這個範例將會克服之前做的所有問題，包括：

  • 這次是圖文版，會比單純的只有影像簡單易懂
  • 範例介紹動態3階層選單，只要你看的懂在幹嘛很容易延伸為更多階層
  • 表單內的所有欄位值處理保存值的問題，包括選單預選值、文字欄位值

後面就開始這個「3+2郵遞區號」的範例製作，你可以點選這裡觀看完成的範例。

 環境與需準備的

基本上這邊所需用的就是一般的Dreamweaver, PHP MySQL環境，不過會用到一個擴充元件來輔助。

 

 資料庫

 既然是一個3+2郵遞區號的範例，而且要介紹到3階層，所以在資料庫這邊就是會有3個資料表，分別記錄縣市（county）、鄉鎮（town）與郵遞區號（zip）的資訊。

01.PNG

county資料表：

02.PNG

town資料表：

其中的 tCounty 欄位對應著 county 資料表中的主鍵欄位 cID，以前面兩筆記錄 tCounty=1 為例，所以它們是屬於 county 資料表中 cID 欄位為 1 的記錄、也就是台北縣的鄉鎮。

03.PNG

zip資料表：

同樣的在這邊 zTown 欄位亦對應著 town 資料表中的主鍵欄位 tID。

04.PNG

而這三個資料表中的cName、tName、zName欄位值都會用來作為選單的「標籤」，選單「值」的部分就會用到 county 與 town 的主鍵欄位，好讓它們下一層的選單得以篩選出所需的記錄作為選項。

 

頁面

接著是頁面的部分名稱為 dymenu.php，這邊準備了一個文字欄位、三個選單與一個按鈕，置於表單 form1 中。

範例規劃是，在使用者點選選單時能夠將表單內的資訊 POST 給自己處理，且即使選單以外的表單元件已經填寫了資訊，在動作之後值依然能夠保留，講白話就是假設使用者先填了『姓名』，在他點選選單後文字欄位已經填過的資訊依然會被保留，雖然這對  JavaScript  版本的多階選單來講是非常理所當然的，但在這邊是要靠 POST 送出的資訊來重新篩選各個階層選單所需的選項，所以還是要另做處理。

其中：

  • 姓名文字欄位命名為 name
  • 郵遞區號部分選單依序命名為 county、town、zip

所以你可以預料當按下按鈕或是變更縣市 county、鄉鎮 town 選單後表單內的資訊都會 POST 送出，這時就能以$_POST['name']、$_POST['county']、$_POST['town']、$_POST['zip']取得對應的值。

05.PNG

頁次： 1 2 3 4 5

« 被紙割傷…………………………………….. – 觸感不錯 當兵去 »

作者:
Cttlee
日期:
00:04:40
分類：
Dreamweaver
被檢視了:
26,442 次
Tags:
, ,  
Trackback:
Trackback URI

33 則回應

  • At 2009.02.05 14:07, Lank said:

    請問可以分享您的程式碼嗎?
    因為我只知道利用HttpRequest來送出資料給PHP,
    但是PHP怎麼回傳我就不知道了

    [Reply]
  • At 2009.03.11 10:25, 直角兄 said:

    Dear cttlee 大大:

    在畫面最上方的「HOME」連結似乎還未更新呢！還是舊的網址喔。

    by 直角兄

    [Reply]
    • At 2009.03.14 14:21, Cttlee said:

      當兵 很懶XD
      那時候會動就沒理了

      [Reply]
    • At 2009.06.20 01:57, bidezgo said:

      不好意思
      請問大大可有辦法改成ASP+ACCESS版本嗎
      小弟對這個功能已經困擾很久了
      但一直都找不到實際看得懂可用的範例
      這個雖然有教學
      可是也是沒有範例檔可下載學習
      怎麼試都不成功
      http://www.pc-net.com.tw/aspro/article/asp0521.asp?articleid=50

      感謝

      [Reply]
      • At 2009.06.23 03:48, Cttlee said:

        語法不同、邏輯一樣
        應該是沒什麼問題的
        pc-net的JS版本只要把選項改掉就可以用了

        [Reply]
      • At 2009.06.27 02:32, 初學者 said:

        大大你好
        想要請教你有辦法用mssql寫嗎？…
        我有試著改過你的碼
        但有些語法好像不能><
        我是使用php跟mssql連

        我試了好久
        都不能用><….
        可以幫助我一下嗎？謝謝！

        [Reply]
        • At 2009.06.27 22:43, Cttlee said:

          資料庫用什麼應該沒什麼差別吧
          你需要處理資料庫連線、建立資訊集的部分
          這邊的程式碼會不一樣

          [Reply]
        • At 2009.07.21 15:24, dadayaha said:

          不好意思，請問為何我們第一層選單跑出來會是問號呢?

          [Reply]
        • At 2009.08.05 22:27, 林小白 said:

          請問行為的Submit Form是擴充嗎?我的DW沒那個項目吶 :roll:

          [Reply]
          • At 2009.08.06 02:02, 林小白 said:

            拍謝~~我看到了~~是擴允元件沒錯 :oops:

            [Reply]
          • At 2009.09.21 09:41, wwy360 said:

            林小白兄…我在擴充元件找不到這個 file，可以放上來嗎？？

            [Reply]
            • At 2009.09.21 09:44, wwy360 said:

              喔~~我在 yahoo 也找到了~~謝謝

              [Reply]
              • At 2009.09.21 15:08, @@ said:

                在哪阿~我找不到耶 可以貼出來嗎~

                [Reply]
              • At 2010.03.27 09:35, vicky said:

                您好!
                請教一下~因為我下載的是DWCS4破解版~但擴充元件卻無法安裝~必須要MX才能使用ㄟ~~是因為我的是破解版的關係嗎

                [Reply]
                • At 2010.03.27 15:58, vicky said:

                  大大~我還是找不到這個元件ㄟ~~sos

                  [Reply]
                  • At 2010.03.27 16:30, vicky said:

                    謝謝~~我找到了

                    [Reply]
                    • At 2010.08.23 18:01, 困惑的人 said:

                      您好:
                      可以也給我那個擴充元件下載點嗎?因為我找不到下載點! :???:

                      [Reply]
                  • At 2010.03.27 16:58, vicky said:

                    老師您好!
                    我照著步驟做~終於完成了!但我出現了問題
                    1.第一階選項不會停留在我所選擇的項目,但第二階會依照我第一階選項所點選的出現該有的選項.例如:第一階順序為NISSAN.FORD.MAZDA.TOYOTA…無論我怎麼選~第一皆都會跳回NISSAN.但我點選NISSAN的話第二階卻不會出現該廠牌的車款
                    麻煩老師幫我解答

                    [Reply]
                    • At 2010.03.28 23:51, Cttlee said:

                      這是第三頁處理的東西

                      [Reply]
                      • At 2010.03.30 10:58, vicky said:

                        thanks!我重新檢查了一遍~~解決了!!因為是新手可能會有很多問題

                        [Reply]
                      • At 2010.04.02 09:53, vicky said:

                        老師您好!想像您請教您幾個問題~因為我要做的是車輛的選單~1.依下拉式條件選單後再另一個視窗開啟顯示我所選的條件資料2.例如我一次有好幾台同款車輛,我的資料庫該怎麼編輯?如果照以上的做法做是否會出現選擇一個廠牌選單上卻顯示多個同款車型?

                        [Reply]
                        • At 2010.05.21 09:50, jjlin said:

                          老師您好：
                          拜讀您的大作「精通 Dreamweaver CS4 與 PHP & MySQL 實例整合應用經典」，真的獲益良多，尤其是第一個範例﹣訊息發佈系統，解決了我很多問題。這個多階選單也是很實用的功能，我依照您的教程，也成功完成了。
                          不過最近遇到一個問題，想請教您一下。就是在設計一個人事(會員)管理的時候，估計有(新增、修改、刪除)三個表單，在(新增)時，需要輸入的資料有姓名、生日、興趣、地址…等等，而地址就是使用多階選單構成。在(修改)時，載入了URL參數，篩選出選定的會員資料，但是這個時候若想修改地址時，選單按完，所有載入的資料(姓名、生日、興趣、地址…)都變空白了，我知道是表單POST給自己而造成的，但一直想不出方法。請問要如何才能在(修改)表單保留已載入的資料呢？謝謝您！

                          [Reply]
                          • At 2010.07.27 06:58, Cttlee said:

                            這裡有cookie啊

                            [Reply]
                          • At 2010.07.27 03:22, red said:

                            不好意思 可以請問 擴充元件如何下載的嗎?
                            我抓不到，那些國外網頁我也看不懂(哭

                            [Reply]
                            • At 2010.08.05 22:13, saviorchung said:

                              老師你好：
                              我找老師的步驟完成了”一組”動態選單，可是當網頁中有”第兩組”動態選單的時候，第二個選單卻會被第一個選單影響，應該怎麼設定呢??

                              PS.(1)第一組選單跟第二組選單沒有關係~
                              (2)老師網頁裡面的教學，書裡面都有嗎??

                              [Reply]
                              • At 2010.08.15 11:07, Cttlee said:

                                URL參數要獨立使用 我猜你兩組都用同樣的URL參數
                                這個選單應該會放在CS5裡

                                [Reply]
                              • At 2010.08.22 11:00, 困惑的人 said:

                                您好:
                                可以提供動態N階選單範例下載嗎?

                                [Reply]
                              • At 2010.08.23 17:24, 困惑的人 said:

                                請問flevSubmitForm.mxp擴充元件在那裡可以下載,我上網都找不到,可以告訴我下載點嗎?

                                [Reply]
                                • At 2010.08.29 18:13, floyd said:

                                  你好 這個範例讓我學了很多
                                  我有一個問題: 我可以做單一個多階動態選單 OR 單一個靜態選單+文字欄位 的多條件搜尋
                                  但是動態選單+文字欄位的建搜尋卻沒有辦法 因為在動態選單的表單必需用POST才能做出 但是搜尋條件的表單卻要用 GET才可以
                                  請問要怎麼解決這個問題? 謝謝

                                  [Reply]
                                  • At 2010.09.04 19:46, Cttlee said:

                                    POST or GET都是你自己可以決定的
                                    沒有說搜尋條件部分的程式一定要用GET or POST

                                    [Reply]
                                  (Required)
                                  (Required, will not be published)
                                  ^