TaiwanZipCode郵遞區號的作法大同小異，比較常用的像是台灣郵遞區號外掛 / Taiwan Zip Code Plugin of jQuery就很簡單也很好用，可控制性也很高。
Taiwan ZipCode作法其實不難，只是因應各種不同framework可能有所調整，主要都是由二個ComboBox組成，當選取縣市別後，會取得鄉鎮別，觸發點只有一個。
執行畫面如下
這個範例主要提供可變的參數有：
/*
CityId : CityCombo的Id
AreaId : AreaCombo的Id
CityName : CityCombo的form使用的name,操作用
CityHiddenName : CityCombo的form使用實際傳送出去的name ex. cityCode=123&areaCode=456
AreaName : AreaCombo的form使用的name,操作用
AreaHiddenName : AreaCombo的form使用實際傳送出去的name ex. cityCode=123&areaCode=456
CityEmptyText : 無值時CityCombo所要顯示的提示字
AreaEmptyText : 無值時CityCombo所要顯示的提示字
*/
程式碼主要內容TaiwanZipCode：
/*
* 本著作係依據創用 CC 姓名標示-相同方式分享 2.5 台灣 授權條款進行授權。
* 如欲瀏覽本授權條款之副本，請造訪 http://creativecommons.org/licenses/by-sa/2.5/tw/
*
* This work is licensed under the Creative Commons Attribution-Share Alike 2.5 Taiwan License.
* To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/2.5/tw/
*
* ExtJS 3.2.1台灣郵遞區號外掛 / Taiwan Zip Code Plugin of ExtJS 3.2.1
* http://blog.yslifes.com/ExtJSTaiwanZipCode/
*
* version 1.0:
* 2010/11/15 18::00:00 GMT
*
* Power by yku
*/
Ext.ns('Ext.plugin');
Ext.BLANK_IMAGE_URL = 'ext-3.2.1/resources/images/default/s.gif';
Ext.plugin.TaiwaZipCode = Ext.extend(Ext.Panel, {
CityId : Ext.id(),
AreaId : Ext.id(),
CityName : 'cityName',
CityHiddenName : 'cityCode',
AreaName : 'areaName',
AreaHiddenName : 'areaCode',
CityEmptyText : '縣市',
AreaEmptyText : '鄉鎮',
cityCode : [["台北市", -1], ["基隆市", -2], ["台北縣", -3], ["宜蘭縣", -4],
["新竹縣", -6], ["桃園縣", -7], ["苗栗縣", -8], ["台中市", -9], ["台中縣", -10],
["彰化縣", -11], ["南投縣", -12], ["嘉義縣", -14], ["雲林縣", -15],
["台南市", -16], ["台南縣", -17], ["高雄市", -18], ["高雄縣", -19],
["澎湖縣", -20], ["屏東縣", -21], ["台東縣", -22], ["花蓮縣", -23],
["金門縣", -24], ["連江縣", -25], ["南海諸島", -26]],
areaCode : [["中正區", "100", "-1"], ["大同區", "103", "-1"],
["中山區", "104", "-1"], ["松山區", "105", "-1"], ["大安區", "106", "-1"],
["萬華區", "108", "-1"], ["信義區", "110", "-1"], ["士林區", "111", "-1"],
["北投區", "112", "-1"], ["內湖區", "114", "-1"], ["南港區", "115", "-1"],
["文山區", "116", "-1"], ["仁愛區", "200", "-2"], ["信義區", "201", "-2"],
["中正區", "202", "-2"], ["中山區", "203", "-2"], ["安樂區", "204", "-2"],
["暖暖區", "205", "-2"], ["七堵區", "206", "-2"], ["萬里鄉", "207", "-3"],
["金山鄉", "208", "-3"], ["南竿鄉", "209", "-25"], ["北竿鄉", "210", "-25"],
["莒光鄉", "211", "-25"], ["東引鄉", "212", "-25"], ["板橋市", "220", "-3"],
["汐止市", "221", "-3"], ["深坑鄉", "222", "-3"], ["石碇鄉", "223", "-3"],
["瑞芳鎮", "224", "-3"], ["平溪鄉", "226", "-3"], ["雙溪鄉", "227", "-3"],
["貢寮鄉", "228", "-3"], ["新店市", "231", "-3"], ["坪林鄉", "232", "-3"],
["烏來鄉", "233", "-3"], ["永和市", "234", "-3"], ["中和市", "235", "-3"],
["土城市", "236", "-3"], ["三峽鎮", "237", "-3"], ["樹林市", "238", "-3"],
["鶯歌鎮", "239", "-3"], ["三重市", "241", "-3"], ["新莊市", "242", "-3"],
["泰山鄉", "243", "-3"], ["林口鄉", "244", "-3"], ["蘆洲市", "247", "-3"],
["五股鄉", "248", "-3"], ["八里鄉", "249", "-3"], ["淡水鎮", "251", "-3"],
["三芝鄉", "252", "-3"], ["石門鄉", "253", "-3"], ["宜蘭市", "260", "-4"],
["頭城鎮", "261", "-4"], ["礁溪鄉", "262", "-4"], ["壯圍鄉", "263", "-4"],
["員山鄉", "264", "-4"], ["羅東鎮", "265", "-4"], ["三星鄉", "266", "-4"],
["大同鄉", "267", "-4"], ["五結鄉", "268", "-4"], ["冬山鄉", "269", "-4"],
["蘇澳鎮", "270", "-4"], ["南澳鄉", "272", "-4"], ["台列嶼", "290", "-27"],
["新竹市", "300", "-5"], ["竹北市", "302", "-6"], ["湖口鄉", "303", "-6"],
["新豐鄉", "304", "-6"], ["新埔鎮", "305", "-6"], ["關西鎮", "306", "-6"],
["芎林鄉", "307", "-6"], ["寶山鄉", "308", "-6"], ["竹東鎮", "310", "-6"],
["五峰鄉", "311", "-6"], ["橫山鄉", "312", "-6"], ["尖石鄉", "313", "-6"],
["北埔鄉", "314", "-6"], ["峨眉鄉", "315", "-6"], ["中壢市", "320", "-7"],
["平鎮市", "324", "-7"], ["龍潭鄉", "325", "-7"], ["楊梅鎮", "326", "-7"],
["新屋鄉", "327", "-7"], ["觀音鄉", "328", "-7"], ["桃園市", "330", "-7"],
["龜山鄉", "333", "-7"], ["八德市", "334", "-7"], ["大溪鎮", "335", "-7"],
["復興鄉", "336", "-7"], ["大園鄉", "337", "-7"], ["蘆竹鄉", "338", "-7"],
["竹南鎮", "350", "-8"], ["頭份鎮", "351", "-8"], ["三灣鄉", "352", "-8"],
["南庄鄉", "353", "-8"], ["獅潭鄉", "354", "-8"], ["後龍鎮", "356", "-8"],
["通霄鎮", "357", "-8"], ["苑裡鎮", "358", "-8"], ["苗栗市", "360", "-8"],
["造橋鄉", "361", "-8"], ["頭屋鄉", "362", "-8"], ["公館鄉", "363", "-8"],
["大湖鄉", "364", "-8"], ["泰安鄉", "365", "-8"], ["銅鑼鄉", "366", "-8"],
["三義鄉", "367", "-8"], ["西湖鄉", "368", "-8"], ["卓蘭鎮", "369", "-8"],
["市中區", "400", "-9"], ["市東區", "401", "-9"], ["市南區", "402", "-9"],
["市西區", "403", "-9"], ["市北區", "404", "-9"], ["北屯區", "406", "-9"],
["西屯區", "407", "-9"], ["南屯區", "408", "-9"], ["太平市", "411", "-10"],
["大里市", "412", "-10"], ["霧峰鄉", "413", "-10"],
["烏日鄉", "414", "-10"], ["豐原市", "420", "-10"],
["后里鄉", "421", "-10"], ["石岡鄉", "422", "-10"],
["東勢鎮", "423", "-10"], ["和平鄉", "424", "-10"],
["新社鄉", "426", "-10"], ["潭子鄉", "427", "-10"],
["大雅鄉", "428", "-10"], ["神岡鄉", "429", "-10"],
["大肚鄉", "432", "-10"], ["沙鹿鎮", "433", "-10"],
["龍井鄉", "434", "-10"], ["梧棲鎮", "435", "-10"],
["清水鎮", "436", "-10"], ["大甲鎮", "437", "-10"],
["外埔鄉", "438", "-10"], ["大安鄉", "439", "-10"],
["彰化市", "500", "-11"], ["芬園鄉", "502", "-11"],
["花壇鄉", "503", "-11"], ["秀水鄉", "504", "-11"],
["鹿港鎮", "505", "-11"], ["福興鄉", "506", "-11"],
["線西鄉", "507", "-11"], ["和美鎮", "508", "-11"],
["伸港鄉", "509", "-11"], ["員林鎮", "510", "-11"],
["社頭鄉", "511", "-11"], ["永靖鄉", "512", "-11"],
["埔心鄉", "513", "-11"], ["溪湖鎮", "514", "-11"],
["大村鄉", "515", "-11"], ["埔鹽鄉", "516", "-11"],
["田中鎮", "520", "-11"], ["北斗鎮", "521", "-11"],
["田尾鄉", "522", "-11"], ["埤頭鄉", "523", "-11"],
["溪州鄉", "524", "-11"], ["竹塘鄉", "525", "-11"],
["二林鎮", "526", "-11"], ["大城鄉", "527", "-11"],
["芳苑鄉", "528", "-11"], ["二水鄉", "530", "-11"],
["南投市", "540", "-12"], ["中寮鄉", "541", "-12"],
["草屯鎮", "542", "-12"], ["國姓鄉", "544", "-12"],
["埔里鎮", "545", "-12"], ["仁愛鄉", "546", "-12"],
["名間鄉", "551", "-12"], ["集集鎮", "552", "-12"],
["水里鄉", "553", "-12"], ["魚池鄉", "555", "-12"],
["信義鄉", "556", "-12"], ["竹山鎮", "557", "-12"],
["鹿谷鄉", "558", "-12"], ["嘉義市", "600", "-13"],
["番路鄉", "602", "-14"], ["梅山鄉", "603", "-14"],
["竹崎鄉", "604", "-14"], ["里山鄉", "605", "-14"],
["中埔鄉", "606", "-14"], ["大埔鄉", "607", "-14"],
["水上鄉", "608", "-14"], ["鹿草鄉", "611", "-14"],
["太保市", "612", "-14"], ["朴子市", "613", "-14"],
["東石鄉", "614", "-14"], ["六腳鄉", "615", "-14"],
["新港鄉", "616", "-14"], ["民雄鄉", "621", "-14"],
["大林鎮", "622", "-14"], ["溪口鄉", "623", "-14"],
["義竹鄉", "624", "-14"], ["布袋鎮", "625", "-14"],
["斗南鎮", "630", "-15"], ["大埤鄉", "631", "-15"],
["虎尾鎮", "632", "-15"], ["土庫鎮", "633", "-15"],
["褒忠鄉", "634", "-15"], ["東勢鄉", "635", "-15"],
["台西鄉", "636", "-15"], ["崙背鄉", "637", "-15"],
["麥寮鄉", "638", "-15"], ["斗六市", "640", "-15"],
["林內鄉", "643", "-15"], ["古坑鄉", "646", "-15"],
["莿桐鄉", "647", "-15"], ["西螺鎮", "648", "-15"],
["二崙鄉", "649", "-15"], ["北港鎮", "651", "-15"],
["水林鄉", "652", "-15"], ["口湖鄉", "653", "-15"],
["四湖鄉", "654", "-15"], ["元長鄉", "655", "-15"],
["中西區", "700", "-16"], ["市東區", "701", "-16"],
["市南區", "702", "-16"], ["市西區", "703", "-16"],
["市北區", "704", "-16"], ["安平區", "708", "-16"],
["安南區", "709", "-16"], ["永康市", "710", "-17"],
["歸仁鄉", "711", "-17"], ["新化鎮", "712", "-17"],
["左鎮鄉", "713", "-17"], ["玉井鄉", "714", "-17"],
["楠西鄉", "715", "-17"], ["南化鄉", "716", "-17"],
["仁德鄉", "717", "-17"], ["關廟鄉", "718", "-17"],
["龍崎鄉", "719", "-17"], ["官田鄉", "720", "-17"],
["麻豆鎮", "721", "-17"], ["佳里鎮", "722", "-17"],
["西港鄉", "723", "-17"], ["七股鄉", "724", "-17"],
["將軍鄉", "725", "-17"], ["學甲鎮", "726", "-17"],
["北門鄉", "727", "-17"], ["新營市", "730", "-17"],
["後壁鄉", "731", "-17"], ["白河鎮", "732", "-17"],
["東山鄉", "733", "-17"], ["六甲鄉", "734", "-17"],
["下營鄉", "735", "-17"], ["柳營鄉", "736", "-17"],
["鹽水鎮", "737", "-17"], ["善化鎮", "741", "-17"],
["大內鄉", "742", "-17"], ["山上鄉", "743", "-17"],
["新市鄉", "744", "-17"], ["安定鄉", "745", "-17"],
["新興區", "800", "-18"], ["前金區", "801", "-18"],
["苓雅區", "802", "-18"], ["鹽埕區", "803", "-18"],
["鼓山區", "804", "-18"], ["旗津區", "805", "-18"],
["前鎮區", "806", "-18"], ["三民區", "807", "-18"],
["楠梓區", "811", "-18"], ["小港區", "812", "-18"],
["左營區", "813", "-18"], ["仁武鄉", "814", "-19"],
["大社鄉", "815", "-19"], ["沙群島", "817", "-26"],
["沙群島", "819", "-26"], ["岡山鎮", "820", "-19"],
["路竹鄉", "821", "-19"], ["阿蓮鄉", "822", "-19"],
["田寮鄉", "823", "-19"], ["燕巢鄉", "824", "-19"],
["橋頭鄉", "825", "-19"], ["梓官鄉", "826", "-19"],
["彌陀鄉", "827", "-19"], ["永安鄉", "828", "-19"],
["湖內鄉", "829", "-19"], ["鳳山市", "830", "-19"],
["大寮鄉", "831", "-19"], ["林園鄉", "832", "-19"],
["鳥松鄉", "833", "-19"], ["大樹鄉", "840", "-19"],
["旗山鎮", "842", "-19"], ["美濃鎮", "843", "-19"],
["六龜鄉", "844", "-19"], ["內門鄉", "845", "-19"],
["杉林鄉", "846", "-19"], ["甲仙鄉", "847", "-19"],
["桃源鄉", "848", "-19"], ["三民鄉", "849", "-19"],
["茂林鄉", "851", "-19"], ["茄萣鄉", "852", "-19"],
["馬公市", "880", "-20"], ["西嶼鄉", "881", "-20"],
["望安鄉", "882", "-20"], ["七美鄉", "883", "-20"],
["白沙鄉", "884", "-20"], ["湖西鄉", "885", "-20"],
["金沙鎮", "890", "-24"], ["金湖鎮", "891", "-24"],
["金寧鄉", "892", "-24"], ["金城鎮", "893", "-24"],
["烈嶼鄉", "894", "-24"], ["烏坵鄉", "896", "-24"],
["屏東市", "900", "-21"], ["地門鄉", "901", "-21"],
["霧臺鄉", "902", "-21"], ["瑪家鄉", "903", "-21"],
["九如鄉", "904", "-21"], ["里港鄉", "905", "-21"],
["高樹鄉", "906", "-21"], ["鹽埔鄉", "907", "-21"],
["長治鄉", "908", "-21"], ["麟洛鄉", "909", "-21"],
["竹田鄉", "911", "-21"], ["內埔鄉", "912", "-21"],
["萬丹鄉", "913", "-21"], ["潮州鎮", "920", "-21"],
["泰武鄉", "921", "-21"], ["來義鄉", "922", "-21"],
["萬巒鄉", "923", "-21"], ["崁頂鄉", "924", "-21"],
["新埤鄉", "925", "-21"], ["南州鄉", "926", "-21"],
["林邊鄉", "927", "-21"], ["東港鎮", "928", "-21"],
["琉球鄉", "929", "-21"], ["佳冬鄉", "931", "-21"],
["新園鄉", "932", "-21"], ["枋寮鄉", "940", "-21"],
["枋山鄉", "941", "-21"], ["春日鄉", "942", "-21"],
["獅子鄉", "943", "-21"], ["車城鄉", "944", "-21"],
["牡丹鄉", "945", "-21"], ["恆春鎮", "946", "-21"],
["滿州鄉", "947", "-21"], ["台東市", "950", "-22"],
["綠島鄉", "951", "-22"], ["蘭嶼鄉", "952", "-22"],
["延平鄉", "953", "-22"], ["卑南鄉", "954", "-22"],
["鹿野鄉", "955", "-22"], ["關山鎮", "956", "-22"],
["海端鄉", "957", "-22"], ["池上鄉", "958", "-22"],
["東河鄉", "959", "-22"], ["成功鎮", "961", "-22"],
["長濱鄉", "962", "-22"], ["麻里鄉", "963", "-22"],
["金峰鄉", "964", "-22"], ["大武鄉", "965", "-22"],
["達仁鄉", "966", "-22"], ["花蓮市", "970", "-23"],
["新城鄉", "971", "-23"], ["秀林鄉", "972", "-23"],
["吉安鄉", "973", "-23"], ["壽豐鄉", "974", "-23"],
["鳳林鎮", "975", "-23"], ["光復鄉", "976", "-23"],
["豐濱鄉", "977", "-23"], ["瑞穗鄉", "978", "-23"],
["萬榮鄉", "979", "-23"], ["玉里鎮", "981", "-23"],
["卓溪鄉", "982", "-23"], ["富里鄉", "983", "-23"]],
//當選擇一個City時,取得Area的範圍Array
getAreaArray : function(store, id) {
var returnData = Array();
store.each(function(record) {
if (record.get('ref') == id) {
returnData[returnData.length] = [record.get('text'),
record.get('value')];
}
});
return returnData;
},
//初始設定
initComponent : function() {
//載入cityCode的Array成Store
this.cityStore = new Ext.data.SimpleStore({
fields : ['text', 'value'],
data : this.cityCode
});
//載入areaCode的Array成Store
this.areaStore = new Ext.data.SimpleStore({
fields : ['text', 'value', 'ref'],
data : this.areaCode
});
//CityComboBox,縣市
this.cityCombo = new Ext.form.ComboBox({
id : this.CityId,
store : this.cityStore,
emptyText : this.CityEmptyText,
mode : 'local',
valueField : 'value',
displayField : 'text',
// autoLoad:true,
triggerAction : 'all',
width : this.CityWidth,
columnWidth : 0.45,//縣市跟鄉鎮的comboBox比例大小可以調整這個
name : this.CityName,
hiddenName : this.CityHiddenName,
editable : false
});
//AreaComboBox,鄉鎮
this.areaCombo = new Ext.form.ComboBox({
id : this.AreaId,
emptyText : this.AreaEmptyText,
store : new Ext.data.SimpleStore({
fields : ['text', 'value', 'ref']
}),
mode : 'local',
valueField : 'value',
displayField : 'text',
triggerAction : 'all',
width : this.AreaWidth,
style : 'padding-left:5px',
columnWidth : 0.5,//縣市跟鄉鎮的comboBox比例大小可以調整這個
name : this.AreaName,
hiddenName : this.AreaHiddenName,
editable : false
});
//縣市被選取時的動作
this.cityCombo.on('select', function(comboBox) {
this.areaCombo.store.loadData(this.getAreaArray(this.areaStore,
comboBox.getValue()));
this.areaCombo.reset();
}.createDelegate(this));
//手動設定值,也就是啟始ZipCode的方式
this.setZipCode = function(cityCode, areaCode) {
this.cityCombo.setValue(cityCode, true);
this.cityCombo.fireEvent('select', this.cityCombo);
this.areaCombo.setValue(areaCode, true);
}
var config = {
layout : 'column',
items : [this.cityCombo, this.areaCombo]
};
// eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
// call parent
Ext.plugin.TaiwaZipCode.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('taiwanZipCode', Ext.plugin.TaiwaZipCode);
執行方法：
var taiwanZipCode = new Ext.plugin.TaiwaZipCode({CityId : Ext.id(),
AreaId : Ext.id(),
CityName : 'cityName',
CityHiddenName : 'cityCode',
AreaName : 'areaName',
AreaHiddenName : 'areaCode',
CityEmptyText:'縣市',
AreaEmptyText:'鄉鎮',columnWidth:.3
});
備註：使用時建議javascript檔案使用無DOM的UTF8或者載入時指定charset
<script type=”text/javascript” charset=”big5” src=”xxx.js”></script>