很久以前曾經做過一篇 動態兩階選單 的文章,但基本上並不算是一個完成體,因為若真的要拿來用會需要再克服一些問題,今天的很不一樣,這個範例將會克服之前做的所有問題,包括:
- 這次是圖文版,會比單純的只有影像簡單易懂
- 範例介紹動態3階層選單,只要你看的懂在幹嘛很容易延伸為更多階層
- 表單內的所有欄位值處理保存值的問題,包括選單預選值、文字欄位值
後面就開始這個「3+2郵遞區號」的範例製作,你可以點選這裡觀看完成的範例。
環境與需準備的
基本上這邊所需用的就是一般的Dreamweaver, PHP MySQL環境,不過會用到一個擴充元件來輔助。
資料庫
既然是一個3+2郵遞區號的範例,而且要介紹到3階層,所以在資料庫這邊就是會有3個資料表,分別記錄縣市(county)、鄉鎮(town)與郵遞區號(zip)的資訊。
county資料表:
town資料表:
其中的 tCounty 欄位對應著 county 資料表中的主鍵欄位 cID,以前面兩筆記錄 tCounty=1 為例,所以它們是屬於 county 資料表中 cID 欄位為 1 的記錄、也就是台北縣的鄉鎮。
zip資料表:
同樣的在這邊 zTown 欄位亦對應著 town 資料表中的主鍵欄位 tID。
而這三個資料表中的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']取得對應的值。





(3 votes, average: 4.67 out of 5)

請問可以分享您的程式碼嗎?
因為我只知道利用HttpRequest來送出資料給PHP,
但是PHP怎麼回傳我就不知道了
hi~
http://cttlee.cc/php/examples/dymenu/dymenu.phpx
Dear cttlee 大大:
在畫面最上方的「HOME」連結似乎還未更新呢!還是舊的網址喔。
by 直角兄
當兵 很懶XD
那時候會動就沒理了
不好意思
請問大大可有辦法改成ASP+ACCESS版本嗎
小弟對這個功能已經困擾很久了
但一直都找不到實際看得懂可用的範例
這個雖然有教學
可是也是沒有範例檔可下載學習
怎麼試都不成功
http://www.pc-net.com.tw/aspro/article/asp0521.asp?articleid=50
感謝
語法不同、邏輯一樣
應該是沒什麼問題的
pc-net的JS版本只要把選項改掉就可以用了
大大你好
想要請教你有辦法用mssql寫嗎?…
我有試著改過你的碼
但有些語法好像不能><
我是使用php跟mssql連
我試了好久
都不能用><….
可以幫助我一下嗎?謝謝!
資料庫用什麼應該沒什麼差別吧
你需要處理資料庫連線、建立資訊集的部分
這邊的程式碼會不一樣
不好意思,請問為何我們第一層選單跑出來會是問號呢?
編碼的問題吧
http://www.google.com.tw/search?sourceid=navclient&aq=2&oq=mysql_quer&hl=zh-TW&ie=UTF-8&rlz=1T4GGIH_zh-TWTW262TW262&q=mysql_query+set+names+‘utf8′
請問行為的Submit Form是擴充嗎?我的DW沒那個項目吶
拍謝~~我看到了~~是擴允元件沒錯
林小白兄…我在擴充元件找不到這個 file,可以放上來嗎??
喔~~我在 yahoo 也找到了~~謝謝
在哪阿~我找不到耶 可以貼出來嗎~