鄉鎮市區預設值鄉鎮市區下拉清單名稱縣市下拉清單名稱areaNameJQuery真的方便，但是要如果要自己弄地址或是郵遞區號，也是很煩人的。
今天在網路上看到有個plugin很方便，不過請注意，我引用的是1.4的版本，如果使用1.3.1的朋友，請注意，我在文章最後面會再補注說明。
提供官方網站：http://app.essoduke.org/twzipcode/
我提供的1.4範例版本：http://www.megaupload.com/?d=OK7DZWJ0
第一件事要include進去。沒有載入，在怎麼寫都是沒用的。 PS：我這JQuery，我是用1.6版，先後順序不能顛倒，因為twzipcode都是base on Jquery產生的。
|
<script type="text/javascript" src="jquery.js"></script> |
這邊就寫個基本範例：
JavaScript(JQuery)：
|
<script> |
HTML：
|
<div id="container"></div> |
這是會顯示的結果：
以上是最基本的，就會顯示出表單出現。
可是問題來了，如果真的要當表單把資料送出去，沒有設定Name tag，那讀取的時候會很不方便。那要怎麼辦呢？他的函數也有提供設定Name的方法。
一樣請不要忘了引用 JQuery跟Twzipcode的部分。Javascript的部分，請參考。
|
<script> |
他提供了幾個參數：
countyName: 指定縣市下拉清單名稱 (String) /* 若不指定則預設名稱為 county */
districtName: 指定鄉鎮市區下拉清單名稱 (String) /* 若不指定則預設名稱為 district */
zipcodeName: 指定郵遞區號輸入框名稱 (String) /* 若不指定則預設名稱為 zipcode */
加了這個參數，可能看不太出什麼差別，唯一的最大差別就是在submit出去後端，接收端會比較方便。
再來就是，怎麼去設定預設值？如果沒有設定預設值，就會像地一個範例看到的那樣，但是如果你有設定預設值，載入之後就會顯示在你預設的那個值。
|
<script> |
提供了幾個設定預設值的參數。
countySel: 縣市預設值 (String)
districtSel: 鄉鎮市區預設值 (String)
zipcodeSel: 郵遞區號預設值 (String)
這邊請注意，如果你郵遞區號亂設定，那不管你鄉鎮市區設定多少，最後都會用郵遞區號逆推回去，換句話說，他的優先判斷會用郵遞區號。等下會用個例子來解釋。這邊先看看上面程式的結果。
再來就是解釋剛剛說的問題，如果今天我們知道 台北市 中正區 他的郵遞區號是100，如果我們按部就班的設定，是沒問題的，但是如果我把參數變成下面這樣。你覺得會是什麼樣的結果呢？
|
<script> |
實際上700 是台南是 中西區的郵遞區號，那你覺得結果會是什麼呢？
這就會是你看到的結果，他是用最後的郵遞區號做為辨別！
最後兩個參數，我在這一起說。
readonly: 郵遞區號輸入框是否唯讀？ (Bool)
css: ['County ClassName', 'Area ClassName', 'Zip ClassName'] (Array)
|
<script> |
加上下面這段CSS敘述。
|
<style> .CountryCss{background:#4169E1;color:#fff;} </style> |
下圖就是結果，你就可以看到表單的樣式被改變了。
最後我要在這題出一些東西給大家，我覺得滿重要的。因為Twzipcode 他目前看到有三個版本，可是三個版本的參數都有點不同。所以要用之前請先確認你的版本。
| twzipcode(V1.3) | twzipcode(V1.4) | twzipcode32(V1.0) | |
| 縣市下拉清單名稱 | countyName | countyName | countyName |
| 鄉鎮市區下拉清單名稱 | areaName | districtName | areaName |
| 郵遞區號輸入框名稱 | zipName | zipcodeName | zipName |
| 路名欄位名稱 | X | X | roadName |
| 縣市預設值 | countySel | countySel | countySel |
| 鄉鎮市區預設值 | areaSel | districtSel | areaSel |
| 郵遞區號預設值 | zipSel | zipcodeSel | X |
| 郵遞區號輸入框是否唯讀 | zipReadonly | readonly | zipReadonly |
| 指定路名預設 | x | x | roadSel |
| 指定各欄位樣式名稱 | css | css | css |
留言列表
