在網頁建立多組 3 碼臺灣郵遞區號表單元素的 jQuery Plugin ─ 讀取快速、不需使用資料庫。
* jQuery-TWzipcode v1.5 以後版本需 jQuery v1.6（支援 2.0）
免 jQuery 並支援 AMD 的純 JS 版本 TWzipcodeJS No-Jquery
Download: branch v1.6.1
新增參數
language: 'language file path' //預設自動判斷Example
$(selector).twzipcode({
language: 'lang/zh-tw' //不需加上 .js
});$bower install jquery-TWzipcode
HTML
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.twzipcode.min.js"></script>
<!-- Normal -->
<div id="twzipcode"></div>
<!-- OR HTML5 data-* (Version 1.5+) -->
<div id="twzipcode">
<div data-role="county" data-style="Style Name" data-value="110"></div>
<div data-role="district" data-style="Style Name" data-value="臺北市"></div>
<div data-role="zipcode" data-style="Style Name" data-value="信義區"></div>
</div>Javascript
$('#twzipcode').twzipcode();設置元素的樣式名稱，依序為 ['縣市清單', '鄉鎮市區清單', '郵遞區號輸入框']
v1.6.9 Google Maps Geolocation API 金鑰。若您達到 Geocoder 的每日限制用量，可透過購買來提高用量，同時需設置金鑰。
預設值: ''
v1.6.7 是否自動偵測用戶位置。不需引入 Google Maps API。
預設值: false
指定縣市下拉清單元素的表單名稱。
預設值: county
縣市清單的預設值
鄉鎮市區下拉清單的表單名稱。
預設值: district
鄉鎮市區的預設值
郵遞區號輸入框的表單名稱。
預設值: zipcode
郵遞區號輸入框的預設值（此選項優先於 countySel, districtSel）
v1.6.6 是否隱藏郵遞區號輸入框並顯示於鄉鎮市區清單內？
預設值: false
v1.5 綁定縣市選單 Change 事件。
v1.5 綁定鄉鎮市區選單 Change 事件。
v1.5 綁定郵遞區號輸入框 keyUp 事件（readonly 必須為 false）。
郵遞區號輸入框是否唯讀？
預設值: true
v1.7.9 要隱藏的縣市名稱，例如 ['臺北市', '宜蘭縣'...]
預設值: []
v1.7.9 要隱藏的鄉鎮市區，可以是名稱或三碼郵遞區號例如 ['大安區', '110'...]
預設值: []
取得已選取縣市的郵遞區號資料
var data = $(selector).twzipcode('data');
console.log(data);從指定的元素移除 Plugin
$(selector).twzipcode('destroy');// 取得縣市 county（返回字串）
var county = $(selector).twzipcode('get', 'county');
// 取得縣市 county 以及鄉鎮市區 district（返回陣列）
var result = $(selector).twzipcode('get', 'county,district'); // 以 , 字串傳入
var result = $(selector).twzipcode('get', ['county', 'district']); // 以陣列傳入
// Callback
$(selector).twzipcode('get', function (county, district, zipcode) {
console.log(county); // 縣市
console.log(district); // 鄉鎮市區
console.log(zipcode); // 郵遞區號
});// 直接設置郵遞區號
$(selector).twzipcode('set', 110);
// 傳入縣市、鄉鎮市區
$(selector).twzipcode('set', {
'county': '臺北市',
'district': '信義區',
'zipcode': 110
});將指定的元素恢復未選狀態
$(selector).twzipcode('reset');將指定的元素輸出為 URL QueryString。
var qs = $(selector).twzipcode('serialize');
console.log(qs);
// output:
// county=AAA&district=BBB&zipcode=999$('selector').twzipcode({
'zipcodeSel': 110,
'readonly': false
});$('selector').twzipcode({
'countySel': '高雄市',
'districtSel': '那瑪夏區'
});.addr-county{background:#4169E1;color:#fff}
.addr-district{background:#008000;color:#fff}
.addr-zip{background:#c00;color:#fff;border:1px solid #666}$('#container').twzipcode({
'css': [
'addr-county', //縣市
'addr-distrcit', // 鄉鎮市區
'addr-zip' // 郵遞區號
]
});或是直接使用 HTML5 data-* 套用樣式
<div id="twzipcode">
<div data-role="zipcode" data-style="addr-zip" data-name="元素名稱" data-value="預設值"></div>
<div data-role="county" data-style="addr-county" data-name="元素名稱" data-value="預設值"></div>
<div data-role="district" data-style="addr-district" data-name="元素名稱" data-value="預設值"></div>
</div>請拜訪 https://code.essoduke.org/twzipcode/ 取得支援。
v1.6.2 開始採用 MIT License
v1.6.1 及更早版本採用 創用 CC 姓名標示-相同方式分享 3.0 台灣授權條款。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent