[ExtJS]TaiwanZipCode台灣郵遞區號外掛

TaiwanZipCode郵遞區號的作法大同小異,比較常用的像是台灣郵遞區號外掛 / Taiwan Zip Code Plugin of jQuery就很簡單也很好用,可控制性也很高。

Taiwan ZipCode作法其實不難,只是因應各種不同framework可能有所調整,主要都是由二個ComboBox組成,當選取縣市別後,會取得鄉鎮別,觸發點只有一個。

執行畫面如下

TaiwanZipCode.png




這個範例主要提供可變的參數有:

/*
     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>

發表迴響