發表者	討論內容
冷日 (冷日)	發表時間：2010/3/16 16:53
Webmaster 註冊日: 2008/2/19 來自: 發表數: 15771	[轉貼]必學!動態二階選單(雙層選單) 必學!動態二階選單(雙層選單) 發表人：直角兄發表分類於： JavaScript, 網頁與資料庫(HTML/CSS/SQL)瀏覽： 9,013人次相信大家都看過一種下拉式選單，當第一個選單選擇之後，第二個選單便會隨之跟著改變，如果還是不慎了解的話，請至郵局的【 3+2郵遞區號查詢】，其中的「縣市/鄉鎮【市】區」便是最好的例子了，這種類型的選單，我們稱其為「動態二階選單」或是「動態雙層選單」。不過說實在的，當在 Google 中蒐尋半天還是找不到合用的二階選單，沒想到最後居然是在「網站建置百寶箱」內找到的，實在是慚愧啊!!! 由於網站建置百寶箱有非常完整的介紹與程式範例，因此直角就不再針對程式進行講解，請各位網友自行前往參考。 garyfu - 網站建置百寶箱 - 動態二階下拉選單 - 以<郵遞區號>為例 http://dob.tnc.edu.tw/themes/old/showPage.php?s=3124&t= garyfu 前輩所提供的範例，就是最典型的二階選單。不過在這個範例中，需要額外用到一個 zipcode 的表單變數，在往後進行網頁維護的時候，有可能會造成一點點的不方便。解決方式是將所有的動態選單內容全數儲存於 Javascript 的陣列變數中即可，不過留待以後再另行介紹。然而事實上，二階選單雖然是最常用的情況，但也會有三階、四階、或更多階選單應用的情況發生，因此，cttlee 前輩提供了以下方法： cttlee - 網站建置百寶箱 - 動態Ｎ階選單 http://dob.tnc.edu.tw/themes/old/showPage.php?s=3327&t= cttlee - 4C教學網 - 動態Ｎ階選單 http://cttlee.co.cc/archives/67(連結已失效) http://cttlee.no-ip.com/?p=20 (連結已失效) cttlee - 4C教學網 - 動態 N 階選單 By Dreamweaver & PHP MySQL 終極版 http://cttlee.cc/2008/12/127.php (2009-03-10 更新) cttlee 前輩提供的方法，是建立在資料庫的基礎上，各位網友可得用心好好揣摩揣摩。這種方法的好處是不用更新網頁，只要更新資料庫的資料，選單就會跟著改變。當然了，如果給一成不變的選單增加一些變化，便可以讓使用者們更容易、更快速地選擇他們所要選的項目，請參考以下資料： siemens - 網站建置百寶箱 - 下拉選單群組 http://dob.tnc.edu.tw/themes/old/showPage.php?s=1973&t= 最後，如果你一點程式都不懂的話，或是想節省許多的時間，沒關係，網路上有所謂的「下拉式選單產生器」喔！雖然不是動態二階選單，但是只要輸入選單的內容，再輸入欲前往的網址，就會自動產生出選單的程式喔！非常方便，推鑒給大家！下拉式選單產生器 http://yzcomm.googlepages.com/h004.html 最後更新日期: 2009-03-10 原文出處：來吧!胡說八道! » Post Topic » 必學!動態二階選單(雙層選單)
回覆
冷日 (冷日)	發表時間：2010/3/16 16:56
Webmaster 註冊日: 2008/2/19 來自: 發表數: 15771	[轉貼]網站建置百寶箱：動態二階下拉選單 - 以<郵遞區號>為例動態的二階層下拉選單，範例是完整的郵遞區號．第一階的下拉選單　在select中要加入 onChange="Buildkey(this.options[this.options.selectedIndex].value);" ．第二階的下拉選單　在select中可加入 onChange="document.CodeForm.zipcode.value=this.options[this.options.selectedIndex].value;" ．再來就是定義 Buildkey 裡面的二階選單內容了可參考範例 or http://garyfu.idv.tw/test/2lvmenu.html 的原始檔範例：http://dob.tnc.edu.tw/demo.php?s=3124&authorSerial=4584&demoStyle=&setDemoInFrame= <script LANGUAGE="javascript"> function Buildkey(num) { var ctr=1; document.CodeForm.subtype.selectedIndex=0; document.CodeForm.zipcode.value=""; document.CodeForm.subtype.options[0]=new Option("請選擇區域...",""); /* 定義二階選單內容 if(num=="第一階下拉選單的值") { d ocument.CodeForm.subtype.options[ctr]=new Option("第二階下拉選單的顯示名稱","第二階下拉選單的值"); ctr=ctr+1; } / /臺北市/ if(num=="1") { document.CodeForm.subtype.options[ctr]=new Option("中正區","100"); ctr=ctr+1; } if(num=="1") { document.CodeForm.subtype.options[ctr]=new Option("大同區","103"); ctr=ctr+1; } if(num=="1") { document.CodeForm.subtype.options[ctr]=new Option("中山區","104"); ctr=ctr+1; } if(num=="1") { document.CodeForm.subtype.options[ctr]=new Option("松山區","105"); ctr=ctr+1; } if(num=="1") { document.CodeForm.subtype.options[ctr]=new Option("大安區","106"); ctr=ctr+1; } if(num=="1") { document.CodeForm.subtype.options[ctr]=new Option("萬華區","108"); ctr=ctr+1; } if(num=="1") { document.CodeForm.subtype.options[ctr]=new Option("信義區","110"); ctr=ctr+1; } if(num=="1") { document.CodeForm.subtype.options[ctr]=new Option("士林區","111"); ctr=ctr+1; } if(num=="1") { document.CodeForm.subtype.options[ctr]=new Option("北投區","112"); ctr=ctr+1; } if(num=="1") { document.CodeForm.subtype.options[ctr]=new Option("內湖區","114"); ctr=ctr+1; } if(num=="1") { document.CodeForm.subtype.options[ctr]=new Option("南港區","115"); ctr=ctr+1; } if(num=="1") { document.CodeForm.subtype.options[ctr]=new Option("文山區","116"); ctr=ctr+1; } /基隆市/ if(num=="2") { document.CodeForm.subtype.options[ctr]=new Option("仁愛區","200"); ctr=ctr+1; } if(num=="2") { document.CodeForm.subtype.options[ctr]=new Option("信義區","201"); ctr=ctr+1; } if(num=="2") { document.CodeForm.subtype.options[ctr]=new Option("中正區","202"); ctr=ctr+1; } if(num=="2") { document.CodeForm.subtype.options[ctr]=new Option("中山區","203"); ctr=ctr+1; } if(num=="2") { document.CodeForm.subtype.options[ctr]=new Option("安樂區","204"); ctr=ctr+1; } if(num=="2") { document.CodeForm.subtype.options[ctr]=new Option("暖暖區","205"); ctr=ctr+1; } if(num=="2") { document.CodeForm.subtype.options[ctr]=new Option("七堵區","206"); ctr=ctr+1; } /臺北縣/ if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("萬里鄉","207"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("金山鄉","208"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("板橋市","220"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("汐止市","221"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("深坑鄉","222"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("石碇鄉","223"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("瑞芳鎮","224"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("平溪鄉","226"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("雙溪鄉","227"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("貢寮鄉","228"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("新店市","231"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("坪林鄉","232"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("烏來鄉","233"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("永和市","234"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("中和市","235"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("土城市","236"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("三峽鎮","237"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("樹林市","238"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("鶯歌鎮","239"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("三重市","241"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("新莊市","242"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("泰山鄉","243"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("林口鄉","244"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("蘆洲市","247"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("五股鄉","248"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("八里鄉","249"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("淡水鎮","251"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("三芝鄉","252"); ctr=ctr+1; } if(num=="3") { document.CodeForm.subtype.options[ctr]=new Option("石門鄉","253"); ctr=ctr+1; } /宜蘭縣/ if(num=="4") { document.CodeForm.subtype.options[ctr]=new Option("宜蘭市","260"); ctr=ctr+1; } if(num=="4") { document.CodeForm.subtype.options[ctr]=new Option("頭城鎮","261"); ctr=ctr+1; } if(num=="4") { document.CodeForm.subtype.options[ctr]=new Option("礁溪鄉","262"); ctr=ctr+1; } if(num=="4") { document.CodeForm.subtype.options[ctr]=new Option("壯圍鄉","263"); ctr=ctr+1; } if(num=="4") { document.CodeForm.subtype.options[ctr]=new Option("員山鄉","264"); ctr=ctr+1; } if(num=="4") { document.CodeForm.subtype.options[ctr]=new Option("羅東鎮","265"); ctr=ctr+1; } if(num=="4") { document.CodeForm.subtype.options[ctr]=new Option("三星鄉","266"); ctr=ctr+1; } if(num=="4") { document.CodeForm.subtype.options[ctr]=new Option("大同鄉","267"); ctr=ctr+1; } if(num=="4") { document.CodeForm.subtype.options[ctr]=new Option("五結鄉","268"); ctr=ctr+1; } if(num=="4") { document.CodeForm.subtype.options[ctr]=new Option("冬山鄉","269"); ctr=ctr+1; } if(num=="4") { document.CodeForm.subtype.options[ctr]=new Option("蘇澳鎮","270"); ctr=ctr+1; } if(num=="4") { document.CodeForm.subtype.options[ctr]=new Option("南澳鄉","272"); ctr=ctr+1; } /新竹縣市/ if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("新竹市","300"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("竹北市","302"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("湖口鄉","303"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("新豐鄉","304"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("新埔鎮","305"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("關西鎮","306"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("芎林鄉","307"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("寶山鄉","308"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("竹東鎮","310"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("五峰鄉","311"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("橫山鄉","312"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("尖石鄉","313"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("北埔鄉","314"); ctr=ctr+1; } if(num=="5") { document.CodeForm.subtype.options[ctr]=new Option("峨眉鄉","315"); ctr=ctr+1; } /桃園縣/ if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("中壢市","320"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("平鎮市","324"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("龍潭鄉","325"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("楊梅鎮","326"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("新屋鄉","327"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("觀音鄉","328"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("桃園市","330"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("龜山鄉","330"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("龜山鄉","333"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("八德市","334"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("大溪鎮","335"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("復興鄉","336"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("大園鄉","337"); ctr=ctr+1; } if(num=="6") { document.CodeForm.subtype.options[ctr]=new Option("蘆竹鄉","338"); ctr=ctr+1; } /苗栗縣/ if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("竹南鎮","350"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("頭份鎮","351"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("三灣鄉","352"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("南庄鄉","353"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("獅潭鄉","354"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("後龍鎮","356"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("通霄鎮","357"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("苑裡鎮","358"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("苗栗市","360"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("造橋鄉","361"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("頭屋鄉","362"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("公館鄉","363"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("大湖鄉","364"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("泰安鄉","365"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("銅鑼鄉","366"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("三義鄉","367"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("西湖鄉","368"); ctr=ctr+1; } if(num=="7") { document.CodeForm.subtype.options[ctr]=new Option("卓蘭鎮","369"); ctr=ctr+1; } /臺中市/ if(num=="8") { document.CodeForm.subtype.options[ctr]=new Option("中　區","400"); ctr=ctr+1; } if(num=="8") { document.CodeForm.subtype.options[ctr]=new Option("東　區","401"); ctr=ctr+1; } if(num=="8") { document.CodeForm.subtype.options[ctr]=new Option("南　區","402"); ctr=ctr+1; } if(num=="8") { document.CodeForm.subtype.options[ctr]=new Option("西　區","403"); ctr=ctr+1; } if(num=="8") { document.CodeForm.subtype.options[ctr]=new Option("北　區","404"); ctr=ctr+1; } if(num=="8") { document.CodeForm.subtype.options[ctr]=new Option("北屯區","406"); ctr=ctr+1; } if(num=="8") { document.CodeForm.subtype.options[ctr]=new Option("西屯區","407"); ctr=ctr+1; } if(num=="8") { document.CodeForm.subtype.options[ctr]=new Option("南屯區","408"); ctr=ctr+1; } /臺中縣/ if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("太平市","411"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("大里市","412"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("霧峰鄉","413"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("烏日鄉","414"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("豐原市","420"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("后里鄉","421"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("石岡鄉","422"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("東勢鎮","423"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("和平鄉","424"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("新社鄉","426"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("潭子鄉","427"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("大雅鄉","428"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("神岡鄉","429"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("大肚鄉","432"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("沙鹿鎮","433"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("龍井鄉","434"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("梧棲鎮","435"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("清水鎮","436"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("大甲鎮","437"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("外埔鄉","438"); ctr=ctr+1; } if(num=="9") { document.CodeForm.subtype.options[ctr]=new Option("大安鄉","439"); ctr=ctr+1; } /彰化縣/ if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("彰化市","500"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("芬園鄉","502"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("花壇鄉","503"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("秀水鄉","504"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("鹿港鎮","505"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("福興鄉","506"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("線西鄉","507"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("和美鎮","508"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("伸港鄉","509"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("員林鎮","510"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("社頭鄉","511"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("永靖鄉","512"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("埔心鄉","513"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("溪湖鎮","514"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("大村鄉","515"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("埔鹽鄉","516"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("田中鎮","520"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("北斗鎮","521"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("田尾鄉","522"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("埤頭鄉","523"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("溪州鄉","524"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("竹塘鄉","525"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("二林鎮","526"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("大城鄉","527"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("芳苑鄉","528"); ctr=ctr+1; } if(num=="10") { document.CodeForm.subtype.options[ctr]=new Option("二水鄉","530"); ctr=ctr+1; } /南投縣/ if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("南投市","540"); ctr=ctr+1; } if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("中寮鄉","541"); ctr=ctr+1; } if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("草屯鎮","542"); ctr=ctr+1; } if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("國姓鄉","544"); ctr=ctr+1; } if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("埔里鎮","545"); ctr=ctr+1; } if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("仁愛鄉","546"); ctr=ctr+1; } if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("名間鄉","551"); ctr=ctr+1; } if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("集集鎮","552"); ctr=ctr+1; } if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("水里鄉","553"); ctr=ctr+1; } if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("魚池鄉","555"); ctr=ctr+1; } if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("信義鄉","556"); ctr=ctr+1; } if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("竹山鎮","557"); ctr=ctr+1; } if(num=="11") { document.CodeForm.subtype.options[ctr]=new Option("鹿谷鄉","558"); ctr=ctr+1; } /嘉義縣市/ if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("嘉義市","600"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("番路鄉","602"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("梅山鄉","603"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("竹崎鄉","604"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("阿里山","605"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("中埔鄉","606"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("大埔鄉","607"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("水上鄉","608"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("鹿草鄉","611"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("太保市","612"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("朴子市","613"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("東石鄉","614"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("六腳鄉","615"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("新港鄉","616"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("民雄鄉","621"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("大林鎮","622"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("溪口鄉","623"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("義竹鄉","624"); ctr=ctr+1; } if(num=="12") { document.CodeForm.subtype.options[ctr]=new Option("布袋鎮","625"); ctr=ctr+1; } /雲林縣/ if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("斗南鎮","630"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("大埤鄉","631"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("虎尾鎮","632"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("土庫鎮","633"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("褒忠鄉","634"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("東勢鄉","635"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("台西鄉","636"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("崙背鄉","637"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("麥寮鄉","638"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("斗六市","640"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("林內鄉","643"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("古坑鄉","646"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("莿桐鄉","647"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("西螺鎮","648"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("二崙鄉","649"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("北港鎮","651"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("水林鄉","652"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("口湖鄉","653"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("四湖鄉","654"); ctr=ctr+1; } if(num=="13") { document.CodeForm.subtype.options[ctr]=new Option("元長鄉","655"); ctr=ctr+1; } /臺南市/ if(num=="14") { document.CodeForm.subtype.options[ctr]=new Option("中西區","700"); ctr=ctr+1; } if(num=="14") { document.CodeForm.subtype.options[ctr]=new Option("東　區","701"); ctr=ctr+1; } if(num=="14") { document.CodeForm.subtype.options[ctr]=new Option("南　區","702"); ctr=ctr+1; } if(num=="14") { document.CodeForm.subtype.options[ctr]=new Option("北　區","704"); ctr=ctr+1; } if(num=="14") { document.CodeForm.subtype.options[ctr]=new Option("安平區","708"); ctr=ctr+1; } if(num=="14") { document.CodeForm.subtype.options[ctr]=new Option("安南區","709"); ctr=ctr+1; } /臺南縣/ if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("永康市","710"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("歸仁鄉","711"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("新化鎮","712"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("左鎮鄉","713"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("玉井鄉","714"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("楠西鄉","715"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("南化鄉","716"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("仁德鄉","717"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("關廟鄉","718"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("龍崎鄉","719"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("官田鄉","720"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("麻豆鎮","721"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("佳里鎮","722"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("西港鄉","723"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("七股鄉","724"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("將軍鄉","725"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("學甲鎮","726"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("北門鄉","727"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("新營市","730"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("後壁鄉","731"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("白河鎮","732"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("東山鄉","733"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("六甲鄉","734"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("下營鄉","735"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("柳營鄉","736"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("鹽水鎮","737"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("善化鎮","741"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("新市鄉","741"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("大內鄉","742"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("山上鄉","743"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("新市鄉","744"); ctr=ctr+1; } if(num=="15") { document.CodeForm.subtype.options[ctr]=new Option("安定鄉","745"); ctr=ctr+1; } /高雄市/ if(num=="16") { document.CodeForm.subtype.options[ctr]=new Option("新興區","800"); ctr=ctr+1; } if(num=="16") { document.CodeForm.subtype.options[ctr]=new Option("前金區","801"); ctr=ctr+1; } if(num=="16") { document.CodeForm.subtype.options[ctr]=new Option("苓雅區","802"); ctr=ctr+1; } if(num=="16") { document.CodeForm.subtype.options[ctr]=new Option("鹽埕區","803"); ctr=ctr+1; } if(num=="16") { document.CodeForm.subtype.options[ctr]=new Option("鼓山區","804"); ctr=ctr+1; } if(num=="16") { document.CodeForm.subtype.options[ctr]=new Option("旗津區","805"); ctr=ctr+1; } if(num=="16") { document.CodeForm.subtype.options[ctr]=new Option("前鎮區","806"); ctr=ctr+1; } if(num=="16") { document.CodeForm.subtype.options[ctr]=new Option("三民區","807"); ctr=ctr+1; } if(num=="16") { document.CodeForm.subtype.options[ctr]=new Option("楠梓區","811"); ctr=ctr+1; } if(num=="16") { document.CodeForm.subtype.options[ctr]=new Option("小港區","812"); ctr=ctr+1; } if(num=="16") { document.CodeForm.subtype.options[ctr]=new Option("左營區","813"); ctr=ctr+1; } /高雄縣/ if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("仁武鄉","814"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("大社鄉","815"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("岡山鎮","820"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("路竹鄉","821"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("阿蓮鄉","822"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("田寮鄉","823"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("燕巢鄉","824"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("橋頭鄉","825"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("梓官鄉","826"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("彌陀鄉","827"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("永安鄉","828"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("湖內鄉","829"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("鳳山市","830"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("大寮鄉","831"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("林園鄉","832"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("鳥松鄉","833"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("大樹鄉","840"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("旗山鎮","842"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("美濃鎮","843"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("六龜鄉","844"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("內門鄉","845"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("杉林鄉","846"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("甲仙鄉","847"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("桃源鄉","848"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("三民鄉","849"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("茂林鄉","851"); ctr=ctr+1; } if(num=="17") { document.CodeForm.subtype.options[ctr]=new Option("茄萣鄉","852"); ctr=ctr+1; } /澎湖縣/ if(num=="18") { document.CodeForm.subtype.options[ctr]=new Option("馬公市","880"); ctr=ctr+1; } if(num=="18") { document.CodeForm.subtype.options[ctr]=new Option("西嶼鄉","881"); ctr=ctr+1; } if(num=="18") { document.CodeForm.subtype.options[ctr]=new Option("望安鄉","882"); ctr=ctr+1; } if(num=="18") { document.CodeForm.subtype.options[ctr]=new Option("七美鄉","883"); ctr=ctr+1; } if(num=="18") { document.CodeForm.subtype.options[ctr]=new Option("白沙鄉","884"); ctr=ctr+1; } if(num=="18") { document.CodeForm.subtype.options[ctr]=new Option("湖西鄉","885"); ctr=ctr+1; } /屏東縣/ if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("屏東市","900"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("三地門","901"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("霧台鄉","902"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("瑪家鄉","903"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("九如鄉","904"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("里港鄉","905"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("高樹鄉","906"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("鹽埔鄉","907"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("長治鄉","908"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("麟洛鄉","909"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("竹田鄉","911"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("內埔鄉","912"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("萬丹鄉","913"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("潮州鎮","920"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("泰武鄉","921"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("來義鄉","922"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("萬巒鄉","923"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("崁頂鄉","924"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("新埤鄉","925"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("南州鄉","926"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("林邊鄉","927"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("東港鎮","928"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("琉球鄉","929"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("佳冬鄉","931"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("新園鄉","932"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("枋寮鄉","940"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("枋山鄉","941"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("春日鄉","942"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("獅子鄉","943"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("車城鄉","944"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("牡丹鄉","945"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("恆春鎮","946"); ctr=ctr+1; } if(num=="19") { document.CodeForm.subtype.options[ctr]=new Option("滿州鄉","947"); ctr=ctr+1; } /臺東縣/ if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("台東市","950"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("綠島鄉","951"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("蘭嶼鄉","952"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("延平鄉","953"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("卑南鄉","954"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("鹿野鄉","955"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("關山鎮","956"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("海端鄉","957"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("池上鄉","958"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("東河鄉","959"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("成功鎮","961"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("長濱鄉","962"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("太麻里","963"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("金峰鄉","964"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("大武鄉","965"); ctr=ctr+1; } if(num=="20") { document.CodeForm.subtype.options[ctr]=new Option("達仁鄉","966"); ctr=ctr+1; } /花蓮縣/ if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("花蓮市","970"); ctr=ctr+1; } if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("新城鄉","971"); ctr=ctr+1; } if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("秀林鄉","972"); ctr=ctr+1; } if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("吉安鄉","973"); ctr=ctr+1; } if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("壽豐鄉","974"); ctr=ctr+1; } if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("鳳林鎮","975"); ctr=ctr+1; } if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("光復鄉","976"); ctr=ctr+1; } if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("豐濱鄉","977"); ctr=ctr+1; } if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("瑞穗鄉","978"); ctr=ctr+1; } if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("萬榮鄉","979"); ctr=ctr+1; } if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("玉里鎮","981"); ctr=ctr+1; } if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("卓溪鄉","982"); ctr=ctr+1; } if(num=="21") { document.CodeForm.subtype.options[ctr]=new Option("富里鄉","983"); ctr=ctr+1; } /金門縣/ if(num=="22") { document.CodeForm.subtype.options[ctr]=new Option("金沙鎮","890"); ctr=ctr+1; } if(num=="22") { document.CodeForm.subtype.options[ctr]=new Option("金湖鎮","891"); ctr=ctr+1; } if(num=="22") { document.CodeForm.subtype.options[ctr]=new Option("金寧鄉","892"); ctr=ctr+1; } if(num=="22") { document.CodeForm.subtype.options[ctr]=new Option("金城鎮","893"); ctr=ctr+1; } if(num=="22") { document.CodeForm.subtype.options[ctr]=new Option("烈嶼鄉","894"); ctr=ctr+1; } if(num=="22") { document.CodeForm.subtype.options[ctr]=new Option("烏坵鄉","896"); ctr=ctr+1; } /連江縣/ if(num=="23") { document.CodeForm.subtype.options[ctr]=new Option("南竿鄉","209"); ctr=ctr+1; } if(num=="23") { document.CodeForm.subtype.options[ctr]=new Option("北竿鄉","210"); ctr=ctr+1; } if(num=="23") { document.CodeForm.subtype.options[ctr]=new Option("莒光鄉","211"); ctr=ctr+1; } if(num=="23") { document.CodeForm.subtype.options[ctr]=new Option("東引鄉","212"); ctr=ctr+1; } /南海諸島/ if(num=="24") { document.CodeForm.subtype.options[ctr]=new Option("東　沙","817"); ctr=ctr+1; } if(num=="24") { document.CodeForm.subtype.options[ctr]=new Option("南　沙","819"); ctr=ctr+1; } /釣魚台列嶼*/ if(num=="25") { document.CodeForm.subtype.options[ctr]=new Option("釣魚台列嶼","290"); ctr=ctr+1; } document.CodeForm.subtype.length=ctr; document.CodeForm.subtype.options[0].selected=true; } </script> <form name="CodeForm" > <table border=1 cellspacing=1 cellpadding=5 > <tr> <td colspan=2>動態二階下拉選單 - 以<郵遞區號>為例</td> </tr> <tr> <td align=right>縣市</td> <td> <select name=type size=1 onChange="Buildkey(this.options[this.options.selectedIndex].value);"> <option value=0>請選擇縣市...</option> <option value="1" >臺北市</option> <option value="2" >基隆市</option> <option value="3" >臺北縣</option> <option value="4" >宜蘭縣</option> <option value="5" >新竹縣市</option> <option value="6" >桃園縣</option> <option value="7" >苗栗縣</option> <option value="8" >臺中市</option> <option value="9" >臺中縣</option> <option value="10" >彰化縣</option> <option value="11" >南投縣</option> <option value="12" >嘉義縣市</option> <option value="13" >雲林縣</option> <option value="14" >臺南市</option> <option value="15" >臺南縣</option> <option value="16" >高雄市</option> <option value="17" >高雄縣</option> <option value="18" >澎湖縣</option> <option value="19" >屏東縣</option> <option value="20" >臺東縣</option> <option value="21" >花蓮縣</option> <option value="22" >金門縣</option> <option value="23" >連江縣</option> <option value="24" >南海諸島</option> <option value="25" >釣魚台列嶼</option> </select> </td> </tr> <tr> <td align=right>區域</td> <td> <select name=subtype size=1 onChange="document.CodeForm.zipcode.value=this.options[this.options.selectedIndex].value;"> <option value="">請選擇區域..</option> </select> </td> </tr> <tr> <td align=right>郵遞區號</td> <td><input type=text name=zipcode value="" size=5></td> </tr> </table> </form> 原文出處：網站建置百寶箱：動態二階下拉選單 - 以<郵遞區號>為例
回覆

冷日 (冷日)	發表時間：2012/11/12 16:08
Webmaster 註冊日: 2008/2/19 來自: 發表數: 15771	[轉貼][AJAX]的多重下拉式選單應用：Select box manipulation 大家似乎對多重下拉式選單的功能情有獨鍾啊！Ajax 能夠在不換頁的情況下，達到資料庫連結，是許多人夢寐以求的功能；而 jQuery 易上手與輕鬆操作的特性，讓我們能更簡單的運用 Ajax 達成目的。然而隨著時間的推移，過去介紹的 cascade 已經有很長一段時間沒有更新，而且在使用上其實存在不少綁手綁腳的地方；距離 jQuery 的宗旨「Write Less, Do More」似乎是還差那麼一小段距離... 介紹一個超讚的 jQuery Plugin： Select box manipulation。透過這個外掛的幫助，可以更輕鬆的實現多重下拉式選單的功能唷，甚至連 cascade 不容易做到的「預設值」也完全沒問題，所需要撰寫的程式碼也少於 cascade，整個就是夢幻的 Plugin！這麼神奇的外掛要怎麼用呢？以下簡單的範例，給有需要的人參考吧：範例是三階層的關聯式多重下拉式選單，分為index.php（呈現頁）、action.php（Ajax 後端資料處理頁）、index.js（JavaScript 處理）、以及 selectboxes 首先我們載入 jQuery 以及 selectboxes，同時頁面所需使用的 JavaScript 也利用外部的方式載入： <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="selectboxes.js"></script> <script type="text/javascript" src="index.js"></script> index.php（節錄）： <p> <select id="select1"> <option value="">請選擇</option> <?php // 資料庫設定 $host_sql = 'localhost'; $username_sql = 'username'; $password_sql = 'password'; // 聯結資料庫 $link = mysql_connect($host_sql, $username_sql, $password_sql) or die('無法連結資料庫'); mysql_select_db('selectboxes', $link); mysql_query('SET NAMES UTF8'); // 動態取得第一階層下拉式選單 $query = 'SELECT id, name FROM games WHERE levelNum = 1'; $result = mysql_query($query, $link); while ($row = mysql_fetch_assoc($result)) { echo '<option value="' . $row['id'] . '">' . $row['name'] . '</option>' . "\n"; } ?> </select> <select id="select2"> <option value="">請選擇</option> </select> <select id="select3"> <option value="">請選擇</option> </select> <!-- 利用隱藏欄位指定預設的選項 --> <input id="fullIdPath" type="hidden" value="3,8,24" /> </p> 有需要填入預設值的時候，至要在隱藏欄位 fullIdPath 中給定 id 的序列值，就可以輕鬆達到設定預設值的效果。 action.php： <?php // 資料庫設定 $host_sql = 'localhost'; $username_sql = 'username'; $password_sql = 'password'; // 聯結資料庫 $link = mysql_connect($host_sql, $username_sql, $password_sql) or die('無法連結資料庫'); mysql_select_db('selectboxes', $link); mysql_query('SET NAMES UTF8'); // 預設選項 $data['0'] = '請選擇'; // 只有在 parentId 與 levelNum 都存在的情況下，才進行資料庫的搜尋 if (0 !== (int) $_GET['id'] && 0 !== (int) $_GET['lv']) { $parentId = (int) $_GET['id']; $levelNum = (int) $_GET['lv']; $query = sprintf("SELECT id, name FROM games WHERE parentId = %d AND levelNum = %d", $parentId, $levelNum); $result = mysql_query($query, $link); while ($row = mysql_fetch_assoc($result)) { // 將取得的資料放入陣列中 $data[$row['id']] = $row['name']; } } // 將陣列轉換為 json 格式輸入 echo json_encode($data); 將取得的資料放入陣列，在經由 json_encode() 轉換為 json 格式；selectboxes 就可以將其轉化為選項 index.js： $(function () { // 判斷是否有預設值 var defaultValue = false; if (0 < $.trim($('#fullIdPath').val()).length) { $fullIdPath = $('#fullIdPath').val().split(','); defaultValue = true; } // 設定預設選項 if (defaultValue) { $('#select1').selectOptions($fullIdPath[0]); } // 開始產生關聯下拉式選單 $('#select1').change(function () { // 觸發第二階下拉式選單 $('#select2').removeOption(/.?/).ajaxAddOption( 'action.php', { 'id': $(this).val(), 'lv': 2 }, false, function () { // 設定預設選項 if (defaultValue) { $(this).selectOptions($fullIdPath[1]).trigger('change'); } else { $(this).selectOptions().trigger('change'); } } ).change(function () { // 觸發第三階下拉式選單 $('#select3').removeOption(/.?/).ajaxAddOption( 'action.php', { 'id': $(this).val(), 'lv': 3 }, false, function () { // 設定預設選項 if (defaultValue) { $(this).selectOptions($fullIdPath[2]); } } ); }); }).trigger('change'); // 全部選擇完畢後，顯示所選擇的選項 $('#select3').change(function () { alert('主機：' + $('#select1 option:selected').text() + '／類型：' + $('#select2 option:selected').text() + '／遊戲：' + $('#select3 option:selected').text()); }); }); 是不是非常簡單呢！多樣化的 jQuery Plugin 可以幫助我們更輕鬆的完成過去繁複的程式撰寫工作，真的要感謝廣大網路上樂於分享的前輩們的努力，有需要的人可以試試看這個更簡單的方法唷！原文出處：[AJAX]的多重下拉式選單應用：Select box manipulation - PHP - TShopping 綜合論壇
回覆
冷日 (冷日)	發表時間：2012/11/12 16:11
Webmaster 註冊日: 2008/2/19 來自: 發表數: 15771	[轉貼]用jQuery做連動式下拉選單用jQuery做連動式下拉選單產生鄉鎮市區的下拉選單的Helper //多寫一個帶兩個參數的方法，方法內去呼叫三個參數的方法 public static string Residence(this HtmlHelper helper, string id, string name) { return Residence(helper, id, name, null); } //郵遞區號+鄉鎮市區的下拉選單 //最後多加一個可以自訂屬性的參數 public static string Residence(this HtmlHelper helper,string id,string name, object htmlAttributes) { MyDataContext db =new MyDataContext(); TagBuilder tag = new TagBuilder("select"); tag.GenerateId(id); tag.MergeAttribute("name",name); tag.MergeAttributes(new RouteValueDictionary(htmlAttributes)); foreach(var m in db.Regions){ tag.InnerHtml += "<option class='sub_" + m.Region_縣市 + "' value='" + m.Residence_鄉鎮市區 + "'>" + m.Residence_鄉鎮市區 + "</option>"; } return tag.ToString(); } 在View上 `<%=Html.Region("Region", "Region")%> <select id="Residence" name="Residence"><option value="0">行政區</option></select> <%=Html.Residence("RegionResidence", "RegionResidence", new { style = "display:none" })%>` 第一行一樣是地區的下拉選單第二行是下拉選單，但是一開始只有"行政區"一個選擇第三行是所有縣市區域的下拉選單，但是把它設為隱藏改成這樣之後，jQuery的程式碼就大大的減少了 `$(function () { makeRegion("Region", "Residence"); }); function makeRegion(parent, child) { $("#" + parent).change(function () { var AddAttr = $("#" + parent).attr("value"); $("#" + child).html($("#" + parent + child + " .sub_" + AddAttr).clone()); if (AddAttr == "0") { $("#" + child).html("<option value='0'>行政區</option>"); } }); };` 2-4行在頁面ready之後去呼叫一個function 6-14行是function主體第7行再說當地區的下拉選單改變時，呼叫一個匿名的function這個function做的第一件事，就是先把選到的地區欄位的value值存在AddAttr裡面第9行是說把隱藏的所有鄉鎮市區的下拉選單中，所有Class符合AddAttr的option複製到空白的下拉選單中第10行做了一個判斷，如果AddAttr的value是0，也就是選到"請選擇縣市"的時候將鄉鎮市區的option改為行政區。原文出處：CodeCharge TAIWAN • 檢視主題 - 用jQuery做連動式下拉選單
回覆

冷日 (冷日)	發表時間：2012/11/12 16:15
Webmaster 註冊日: 2008/2/19 來自: 發表數: 15771	[轉貼][jQuery]縣市連動下拉選單(縣市合併郵遞區號前三碼) [jQuery]縣市連動下拉選單(縣市合併郵遞區號前三碼) 郵遞區號已更正~已打包完成~請於連結下載~如有發現錯誤請告知~中華郵政目前只看到3+2碼對照~ 參考網址：http://www.powerweb.tw/modules/news/V98 由於縣市合併後舊式的下拉選單選擇縣市資料都要要更新，要一筆一筆對照然後更改有些累人(懶) 就去找了"縣市合併新版 3 碼郵遞區號 MySQL 匯入檔"，參考網址：http://www.powerweb.tw/modules/news/V99 把資料庫整理了下，在自己利用jQuery寫了底下縣市下拉選單功能帶入郵遞區號，也順便把整理後的MySql資料庫匯出 <?php include 'Include/open.php'; ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //利用jQuery的ajax把縣市編號(CNo)傳到Town_ajax.php把相對應的區域名稱回傳後印到選擇區域(鄉鎮)下拉選單 $('#myCity').change(function(){ var CNo= $('#myCity').val(); $.ajax({ type: "POST", url: 'Town_ajax.php', cache: false, data:'CNo='+CNo, error: function(){ alert('Ajax request 發生錯誤'); }, success: function(data){ $('#myTown').html(data); $('#myZip').val("");//避免重新選擇縣市後郵遞區號還存在，所以在重新選擇縣市後郵遞區號欄位清空 } }); }); //根據選擇區域(鄉鎮)的編號傳到Zip_ajax.php把區域對應的郵遞區號印到指定的郵遞區號欄位 $('#myTown').change(function(){ var TNo= $('#myTown').val(); $.ajax({ type: "POST", url: 'Zip_ajax.php', cache: false, data:'TNo='+TNo, error: function(){ alert('Ajax request 發生錯誤'); }, success: function(data){ $('#myZip').val(data); } }); }); }); </script> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0" align=center> <tr> <td width="113" height="28">通訊地址：</td> <td height="28" colspan="3"> <select name="F_I_CNo" id="myCity"> <option value="">選擇縣市</option> <?php $City = "select * from City where State=0"; $City_rs = mysql_query($City); while ($City_rows = mysql_fetch_array($City_rs)) { ?> <option value="<?php echo $City_rows["AutoNo"] ?>"><?php echo $City_rows["Name"]; ?></option> <?php } ?> </select> <select name="F_I_TNo" id="myTown"> <option value="">選擇鄉鎮</option> </select> 郵遞區號： <input id="myZip" type="text" class="field10" Name="F_S_NH_Zip" value="" size="5" readonly="ture"/> 地址： <input type="text" class="field10" Name="F_S_NH_Address" value="" style="width:210px;"/> </td> </tr> </table> </body> </html> Town_ajax.php(回傳區域(鄉鎮)的內容)程式碼 <?php include 'Include/open.php'; $Town = "select * from Town where CNo='" . $_POST["CNo"] . "'"; $Town_rs = mysql_query($Town); $Town_num = mysql_num_rows($Town_rs); if ($Town_num > 0) {//縣市編號帶入後如果有資料存在顯示底下區域內容回傳 echo "<option value=''>選擇鄉鎮</option>"; while ($Town_rows = mysql_fetch_array($Town_rs)) { echo "<option value='" . $Town_rows["AutoNo"] . "'>" . $Town_rows["Name"] . "</option>"; } } else {//縣市編號帶入後如果有資料存在顯示底下內容回傳 echo "<option value=''>選擇鄉鎮</option>"; } ?> Zip_ajax.php(回傳郵遞區號資料)程式碼 `<?php include("Include/open.php"); $Zip = "select * from Town where AutoNo='" . $_POST["TNo"] . "'"; $Zip_rs = mysql_query($Zip); $Zip_num = mysql_num_rows($Zip_rs); if ($Zip_num > 0) {//區域(鄉鎮)編號帶入後如果有資料存在顯示底下郵遞區號內容後回傳 $Town_rows = mysql_fetch_array($Zip_rs); echo $Town_rows["Post"]; } else { echo "無資料"; } ?>` 如果有錯誤的地方請告知^.^ 原文出處：My Document: [jQuery]縣市連動下拉選單(縣市合併郵遞區號前三碼)
回覆
冷日 (冷日)	發表時間：2012/11/12 16:20
Webmaster 註冊日: 2008/2/19 來自: 發表數: 15771	[轉貼]Ajax 兩層連動選單你一定有看過註冊會員或線上購物時用來輸入郵遞區號和地址的選單吧！例如你在第一個選單選擇了 "台北市"，另一個選單的內容就會變成中正區、大安區、信義區... 等等。當你在第一個選單選擇了 "高雄市"，另一個選單的內容又會變的不一樣。這樣的選單就稱為「兩層的連動選單」。老方法是... 以往要製作這樣的選單，有兩種方法：一是先把全部的資料全部載入到頁面中，包括所有縣市和所有區鄉鎮，再用 Javascript 去動態更改選單的內容。這樣做的好處是當你選擇了第一個選單，第二個選單會馬上跟著變，速度很快。但如果全部的資料太多，在一開始頁面載入時就得等很久的時間了，網路流量也比較大。而且當瀏覽者只會選擇台北市的話，幾乎 90% 傳送過來的其他縣市資料都使用不到，似乎有點浪費頻寬。另一種方式是：第一個選單選擇後，將選單資料送出到後端去查詢資料庫，再將第二個選單的內容送到瀏覽者的電腦中。這樣的好處是，網路傳送的資料比較少，而且幾乎只會傳送有用的資料。但是將資料送到後端，再等待接受資料，都是需要時間的，很有可能第一個選單選擇後，等了幾分鐘後第二個選單的內容才出現，而且頁面還得整個重新 reload 一次，感覺很 OOXX。所以不是犧牲頻寬，就是犧牲時間。遇到這樣的問題，我們會喜歡折衷的方法，先載入第一個選單的內容就好，選擇後再跟後端要求資料，而且在要求資料的時候使用 Ajax 的技術，雖然還是需要時間等待，但至少不用整個換頁，整個流程感覺是順暢多了。從 HTML 開始下載範例檔案首先在網頁中建立表單以及兩個下拉選單，HTML 碼如下：第一個選單叫做 cid 是遊戲的分類，第二個選單叫做 gid 是各分類中遊戲的名稱。頁面一載入時會將所有遊戲分類都先載入進來，放在第一個選單中讓瀏覽者可以選擇分類。選擇了某一個分類後，第二個選單才會顯示該分類中的遊戲。一開始時因為尚未選擇分類，所以第二個選單不需要有任何預先載入的內容，只留一個空的 "請選擇"。先來看看全部完成後兩個選單的畫面應該是這樣的： Ajax 通用函數 IE 和 Firefox 不僅在顯示頁面內容時有所差異，連 Ajax 所使用的物件也完全不一樣，這一直都是讓網頁設計師頭髮愈來愈白 (愈來愈少?) 的原因之一啊！在 Javascript 一開始的地方就先寫了一個函數 XMLHttpRequest() ，讓 IE 也能和 Firefox 一樣使用相同的方式來建立 Ajax 的物件，如此一來就不需要有兩種寫法了，十分方便。有興趣知道這個通用函數怎麼寫的，麻煩自行看原始碼，在這裡就不多做解釋了，基本上只要知道如何使用就可以了，anyway... 這個函數後面才會用到。另外還有一個通用函數 addURLParam()，你只要提供一個 url、一個變數名稱和一個值，這個函數就會幫你把變數名稱和值附加到 url 的尾端，變成 GET 方式的 url 參數。如果你需要加入多個參數，可以多次使用 addURLParam()，每次會加入一個參數。通常在建立 Ajax 物件跟後端伺服器要求資料時，都會帶不同的參數以便取得相關的資料，這時便能使用 addURLParam() ，將所需的參數（例如是從表單中取得的數值）附加到要求的 url 後面。稍後會再講解使用方法。要開始囉... 處理選單的 Javascript 終於要上場了，首先是做一些初始化動作的 code : 這段程式碼做了幾件事：使用 DOM 方法 document.getElementById() 取得這兩個選單，分別存放在 oCateList 和 oGameList 變數之中。將 Ajax 跟後端要求資料的 url 存放在 sURLInit 變數中。宣告一個全域變數 json 來存放 Ajax 呼叫後，伺服器所傳回的資料。稍後會使用到這個變數。在還沒開始任何動作之前先將第二個選單 oGameList 停用，讓它無法選擇。因為一開始時第二個選單尚未有任何內容可選，就乾脆把它 disable 掉吧！選單 onChange ... 送出 Ajax！搞了這麼久，到底何時才要使用 Ajax 啊？相信你一定也期待很久了吧！當瀏覽者選擇了第一個選單的其中一個選項時，就必須送出 Ajax 呼叫去和後端要求第二個選單的內容資料。所以... 主要的 Ajax 動作是寫在選單的 onchange 事件中：當選單被選擇之後，先檢查選擇的項目是不是第一項 "請選擇"，利用 this.selectedIndex 是否等於 0 來檢查。如果是的話就將第二個選單的項目清空，變成只有 "請選擇"，而且 disable 無法選取。你可能會想說，第二個選單一開始不就是只有 "請選擇" 而且被停用的狀態嗎？為何又要多此一舉呢？因為要考慮到一種情況：瀏覽者在第一個選單先選取了有效的項目，這時第二個選單便被啟用並且有內容。然後第一個選單又選回到第一個選項 "請選擇"，這時是不是就該把第二個選單的內容清空並且停用了呢！第一個選單沒有選擇正確時，第二個選單當然不能動囉。當第一個選單選擇了正確的項目，馬上利用自訂函數 addURLParam() 將所選取項目的值 this.options[this.selectedIndex].value 附加成 url 參數（參數名稱叫做 id），產生出完整的 Ajax 要求 url，存放在 sURL 變數中。addURLParam() 的用法為：結果 url = addURLParam(原始 url,參數名稱,參數值) 接著是建立 Ajax 物件、送出要求的標準寫法。因為先前已經由自訂函數處理掉了 IE 和 Firefox 差異的問題，所以統一使用 XMLHttpRequest() 即可： var oRequest = new XMLHttpRequest(); oRequest.open("get"、sURL、true); oRequest.send(null); 在這裡還要特別注意一點，送出 Ajax 要求之後、接收到資料之前會有一段等待的 "空窗期"，為了避免在這段期間內瀏覽者又重新選擇了第一個選單、又送出另一個要求，把事情搞的很複雜，所以這時最好把第一個選單暫時停用，等到 Ajax 資料接收回來後再重新啟用。這是非常重要的小技巧哦！！！處理接收的資料送出 Ajax 要求後，最重要的便是等待後端伺服器傳回來的資料了。資料傳送需要時間，所以不可能在送出要求（oRequest.send）的下一行程式碼就立刻接收資料。到底要等待多久也無法預估，畢竟網路速度快慢不一，所以只有一個方法，就是等資料送回來的時候自動通知我們。當 Ajax 資料送回來時會自動執行 onreadystatechange() 這個物件方法，因此我們可以將處理接收的資料的程式碼寫在這個方法裡面。在上一段程式碼中 ...... 空出來的地方，就是要放置這個 onreadystatechange() 方法。這個方法必須寫在 send() 之前，在送出要求之前就必須先定義好該如何處理接收的資料：其實不是只有接收到資料，只要 Ajax 物件的狀態有變更時，就會呼叫 onreadystatechange()。所以在 oRequest.onreadystatechange() 裡面，先檢查變更後的狀態 oRequest.readyState 是否為 4，4 的話才是接收到伺服器端的回應。而接收到回應後的第一件事則是把第一個選單給啟用，讓瀏覽者有機會可以選擇其他項目。接收到的回應不一定就是我們想要的資料，也有可能是錯誤訊息，表示伺服器沒有回應、找不到 url 或是網路傳輸有問題。因此再檢查回應的狀態 oRequest.status，如果值是 200 的話表示是正確的回應，可以從 oRequest.responseText 取得傳回的資料內容。除了 200 之外都是錯誤的回應，這時可以從 oRequest.statusText 取得錯誤訊息文字。 readyState 和 status 所代表狀態，意義是完全不同的哦！請不要搞混囉！ JSON 如果成功的接收到資料後，將資料轉換為 Javascript 認識的格式，存放在變數 json 中，以便稍後可以使用： json = "json=" + oRequest.responseText; json = eval(json); 由伺服器所傳回的這種資料格式稱為 JSON，它只是純文字，但長得像是下面這個樣子：如果你對 Javascript 很熟悉的話，應該不難看出，其實 JSON 就是 Javascript 的物件陣列（由很多個物件所組成的陣列）。轉換後便能使用一般存取陣列的方式 json[1].text 或 json[2].value 來存取陣列中的值。對於 Ajax 傳回的資料來說，最方便的就是 JSON 的格式，比起 XML 可是好多了。JSON 可以直接轉換成 Javascript 的陣列來使用，而 XML 還得另外寫一大堆程式來分析內容，因此伺服器端的程式（例如 ASP、PHP 或 ColdFusion ）最好是將資料庫查詢出來的結果輸出成 JSON 的格式再傳回來。如果你想知道 PHP 如何產生出像範例這樣的 JSON 字串，可以用記事本開啟 json_list.php 這個檔案來看。動態產生選單內容接收到資料也轉換為可以使用的格式後，最終的目的便是要產生出第二個選單的內容。由於 JSON 已經被轉換為 Javascript 的陣列，因此跑一個迴圈輕輕鬆鬆地變成將每一筆資料變成選單中的項目： for(var i=0,j=json.length;i < j;i++) { oGameList.options[i+1] = new Option(json[i].text,json[i].value); } 動態產生選單的項目有幾種方式：你或許知道 DOM 的方法 document.createElement() 和 appendChild()，但這種方式比較麻煩而且耗資源。也許你會想到用較不耗資源的 innerHTML，將select 標籤的 innerHTML 替換掉，便能更新選單項目了。但很抱歉的是，在 IE 中的 select 是不吃這一套的，會發生錯誤。另一種更簡潔有力而且通用的方式是：新增項目：選單.options[i] = new Option(文字,值) 刪除項目：選單.options[i] = null 刪除所有項目：選單.options.length = 0 不賴吧！搭配個迴圈便能輕鬆的將第二個選單內容產生出來了。有了內容之後，別忘記將第二個選單啟用，讓選單能夠被選取。 ※ 補充：在開始產生選單內容的 for 迴圈前面，必須多加上 oGameList.options.length = 0;* 將選單內容先清空，不然可能會有先前的 "餘毒" 哦～* 表單檢驗選單的部分都完成了，但別忘記，反是表單送出之前都應該做表單檢驗的動作，萬一瀏覽者什麼都沒選、什麼都沒填寫就按下送出，一定要狠狠的給他警告一番。表單檢驗的程式碼加在 form 的 onsubmit 事件上：這裡做了一個很簡單的檢查，只要第二個選單所選擇的項目不是第一項 "請選擇"（selectedIndex 為 0）即可。在這裡還要注意一個小技巧，oGameList 是選單，屬於表單中的一個物件，只要寫表單物件.form 便能抓到該物件所在的表單，不需要再大費周章的用 getElementById() 或 getElementsByTagName() 來取得表單了。 That's all !! (這句話是跟某個老女人學的... ) 原文出處：Ajax 兩層連動選單 - 小正正教室 - Yahoo!奇摩部落格
回覆