2009 年 02 月 13 日 · 64 words · 1 min read · essoduke chang ·

jQuery 台灣郵遞區號外掛

會想要做這種無聊的外掛，起因是目前手上的案子，原本用了傳統的 DOM 做了一組單一頁面適用一組的 js，之後突然有兩組的需求，前天又變成四組，一氣之下就著手寫了這個 Plugin 來用 XD

下載位置（10KB）

Badongo
XUN6

安裝

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="twzipcode.min.js"></script>

用法：

javascript

$('#container').twzipcode({
    county: 'county', //縣市清單 ID
    area: 'area', //鄉鎮市區清單 ID
    zipcode: 'zipcode', //郵遞區號輸入框 ID
    countySel: '高雄縣', //縣市預設值
    areaSel: '那瑪夏鄉' //鄉鎮市區預設值
});

HTML

<div id="container">
  <select id="county"><option value="">縣市</option></select>
  <select id="area"><option value="">鄉鎮市區</option></select>
  <input type="text" id="zipcode" />
</div>

—
第一次寫 jQuery Plugin，覺得頗有趣的。
結論：我真的很閒吶！

28 comments

Lyndon · 2009 年 09 月 24 日

厲害厲害
有3+2版的嗎？
真令人期待
呆呆怡 · 2010 年 01 月 06 日

真的很方便耶…..無意間search到這網站
你真是大好倫…..感動!!
essoduke · author · 2010 年 01 月 06 日

希望這個小程式能幫助到你…呵呵
呆呆怡 · 2010 年 02 月 04 日

可是發生了問題，我這邊發現只有ie8.0適用
ie7.0、ie6.0及kkman
都沒辦法正常出現
不知道你那邊會嗎??
essoduke · author · 2010 年 02 月 04 日

不知道您遇到什麼問題？可以描述一下嗎？
目前手邊沒有 IE7 以下的瀏覽器，要去公司後才能測了
呆呆怡 · 2010 年 02 月 05 日

就是選項完全出不來….
也是遇到學生回報和行政單位回報
我才知道滴><"
essoduke · 2010 年 02 月 05 日

這是我用 IETest 開啟 IE6, IE7 所擷取的圖：

Twzipcode in IE6

Twzipcode in IE7

沒有發現您說的異狀呢？
呆呆怡 · 2010 年 02 月 08 日

是喔….我是沒有放預設鄉鎮
不然我再試看看好ㄌ

我的程式確實在ie6.0和ie7.0
發生了狀況

那我再debug看看….謝啦!!
kenneth · 2010 年 03 月 18 日

樓上說的沒錯在ie6有點bug
就是沒設預設值的話,鄉鎮市選項就只會有一個
如下圖
http://ppt.cc/Cyr7
essoduke · author · 2010 年 03 月 24 日

感謝您的資訊，目前已發佈 v1.2 修正 IE6 的問題。
若還有發現其他問題或需改進之處，還麻煩您回報。

http://app.essoduke.org/twzipcode/
yelmous · 2010 年 04 月 20 日

可惜不能由zip code反查…
法克斯 · 2010 年 05 月 23 日

這外掛太棒了，感謝你 >//////<
Nicky · 2010 年 09 月 03 日

This is awesome! Thanks for sharing save me lots of time.
呆呆怡 · 2010 年 11 月 30 日

再請教一下，是不是BIG-5的就沒辦法正常顯示呀….><"
呆呆怡 · 2010 年 11 月 30 日

我把網頁改為BIG5時
錯誤訊息是
訊息: 必須要有 ‘:’
行: 1
字元: 1589
程式碼: 0
essoduke · author · 2010 年 11 月 30 日

js 檔是使用 utf-8 編碼，所以網頁改了 js 也要改為 big5 編碼哦…
可使用 Ultraedit 或 PsPad 更改文件編碼
呆呆怡 · 2010 年 11 月 30 日

o ya~~~

真的可以了耶~~早知道就直接問ㄌ

試了一個晚上加一個下午XD
呆呆怡 · 2011 年 01 月 24 日

請問幾大直轄市都升格了
有新版的郵遞區號jquery嗎??
essoduke · author · 2011 年 01 月 27 日

因為這次改制後的行政區劃只有把鄉鎮市改為區，所以只要改 twzipcode-1.x.js 內底部的 JSON 郵遞區號資料。

以下是我改好的版本：
http://app.essoduke.org/twzipcode/twzipcode-1.3.1.js
呆呆怡 · 2011 年 01 月 28 日

謝謝essoduke 大大~~~
Blackie · 2011 年 03 月 24 日

E大你好

先前瀏覽過你的App網站發現你有做一個Jquery的郵遞區號Plug in

想請問該如何實作你在頁面上的選擇後的郵遞區號、縣市、區三個欄位post到指定頁面接收

小弟看到你的範例是有用form包起來傳過去，但我沒看到你有任何接收request之後write出來的script,所以可以麻煩你指導一下

感謝
essoduke · author · 2011 年 03 月 24 日

@Blackie:

可以指定縣市、區、郵遞區號的欄位名稱，例如：

$(‘zipcode’).twzipcode({
countyName: ‘addr4_county’,
areaName: ‘addr4_area’,
zipName: ‘addr4_zip’
});

接收端（以PHP為例）：

$county = $_POST[‘addr4_county’];
$area = $_POST[‘addr4_area’];
$zip = $_POST[‘addr4_zip’];

接收到的都是陣列類型：

$county[0] = ‘縣市’;
$area[0] = ‘鄉鎮市區’;
$zip[0] = ‘郵遞區號’;

Demo 頁的第四筆範例你可以送出試試，在表單下方會顯示送出結果。
chino · 2011 年 07 月 07 日

感謝您提供這個外掛
剛發現新版的好像在jquery1.4.2會產生錯誤
搞好久才發現是jquery版本的問題
不知道最低版本要多少阿
我現在是直接下載你頁面上google的是1.6x
就正常，建議是可以標明上去jquery最低版本多少
少走點冤妄路阿^^
1. essoduke · author · 2011 年 07 月 09 日
  
  @chino:
  
  感謝您的提醒，已加註 jQuery 版本需求。
  
  舊版 jQuery 會無法使用是因為 twzipcode 1.4 用了 jQuery 1.6 的 prop 屬性設定元素參數。
  如果無法使用 jQuery 1.6.x，建議下載 twzipcode 1.3 版…
阿端 · 2011 年 07 月 08 日

嗨

很棒的外掛
我嘗試了很久想把 zipcode 用 css 移到最左邊
但是如果單對它設定 float:left
在 IE 6 他會被擠下去一行

like this:
http://screensnapr.com/v/KFMNjR.png

其它瀏覽器都正常：
http://screensnapr.com/v/quaeFf.png

我也想拆開 js 但是不會改
不知道有什麼辦法可以解決嗎？><
1. essoduke · author · 2011 年 07 月 10 日
  
  @阿端:
  
  若要改變下拉選單或郵遞區號欄位的預設位置，請修改 jQuery-1.4.js 第 167-169 行的順序即可。
  這樣就不需使用 css float 以免 IE6 凸槌哩。
阿端 · 2011 年 07 月 12 日

太感謝了！我剛剛才發現有不是 mini 版本的 …….. >///<
cw · 2014 年 09 月 22 日

Locale.js 也是一套用來 i18n (localization)的工具
(https://github.com/cwtuan/Locale.js).
也是滿方便使用，而且任何JS專案的可以用，不限於某個JS framework

Comments are closed.

Related posts

28 comments