範例

預設

<!-- HTML -->
<div id="twzipcode"></div>
/* Javascript */
$('#twzipcode').twzipcode();

設置元素的預設值

$('#twzipcode').twzipcode({
    'zipcodeSel'  : '106', // 此參數會優先於 countySel, districtSel
    'countySel'   : '臺北市',
    'districtSel' : '大安區'
});

設置元素的 CSS 樣式

/* CSS */
.zipcode {
    background-color: #c00;
    color: #fff;
}
.county {
    background-color: #4169E1;
    color: #fff;
}
.district {
    background-color: #008000;
    color: #fff;
}
/* Javascript */
$('#twzipcode').twzipcode({
    // 依序套用至縣市、鄉鎮市區及郵遞區號框
    'css': ['county', 'district', 'zipcode']
});

設置元素的表單名稱

<!-- HTML Markup -->
<form>
    <div id="twzipcode"></div>
    <button type="submit">Submit</button>
</form>
/* Javascript */
$('#twzipcode').twzipcode({
    'countyName'   : 'county',   // 預設值為 county
    'districtName' : 'district', // 預設值為 district
    'zipcodeName'  : 'zipcode'   // 預設值為 zipcode
});

// 使用元素陣列命名
$('#twzipcode').twzipcode({
    'countyName'   : 'county[]',
    'districtName' : 'district[]',
    'zipcodeName'  : 'zipcode[]',
});

自訂 HTML5 容器

使用 data-* 的方式就不需要在呼叫 twzipcode 時傳入參數。

<div id="twzipcode">
    <div data-role="county"
         data-name="表單名稱"
         data-value="預設值"
         data-style="樣式名稱">
    </div>
    <div data-role="district"
         data-name="district[]"
         data-value="大安區"
         data-style="district-style">
    </div>
    <div data-role="zipcode"
         data-name="zipcode"
         data-value="160"
         data-style="zipcode-style">
    </div>
</div>
/* CSS */
.district-style { … }
.zipcode-style { … }
/* Javascript */
$('#twzipcode').twzipcode();

偵測用戶位置

不需要先引入 Google Maps API 就能直接使用。

瀏覽器支援 GeoLocation API 並開啟 GPS 或 WIFI。

$('#twzipcode').twzipcode({
    'detect': true // 預設值為 false
});

//或是 callback
$('#twzipcode').twzipcode({
    'detect': function (coords) {
        console.log(coords.latitude);
        console.log(coords.longitude);
    }
});

隱藏縣市和鄉鎮市區

$('#twzipcode').twzipcode({
    'hideCounty': ['臺北市', '宜蘭縣'], // 隱藏`臺北市`, `宜蘭縣`
    'hideDistrict': ['三重區', '110']   // 隱藏`三重區`, `110`(臺北市信義區)
});

方法操作


                        
                        
                        
                        
                    

下載

Download on GitHub

目前版本 : 2.0.0

npm

#https://www.npmjs.com/package/jquery-twzipcode
npm install jquery-twzipcode

Bower package


# 感謝 Bo-Yi Wu 提供 (https://plus.google.com/110977592215877035987/posts)
# GitHub: https://github.com/appleboy/jquery-twzipcode
$ bower install jquery-twzipcode --save

選項

名稱 類型 預設值 說明
countyName string county 指定縣市下拉清單的表單名稱。
countySel string 縣市預設值
css Array 表單元件樣式名稱。格式: ['縣市', '鄉鎮市區', '郵遞區號']
detect boolean | Function false 是否偵測用戶位置(此功能提供的數據僅供參考)
districtName string district 指定鄉鎮市區下拉清單的表單名稱。
districtSel string 鄉鎮市區預設值
onCountySelect Function 綁定縣市選單 Change 事件。
onDistrictSelect Function 綁定鄉鎮市區選單 Change 事件。
onZipcodeKeyUp Function 綁定郵遞區號輸入框 keyUp 事件(readonly 必須為 false)。
readonly boolean true 郵遞區號輸入框是否唯讀?
zipcodeName string zipcode 指定郵遞區號輸入框的表單名稱。
zipcodeSel string 郵遞區號預設值
zipcodeIntoDistrict boolean false 隱藏郵遞區號輸入框,並顯示於鄉鎮市區清單內。
hideCounty array 隱藏的縣市名稱,例如 ['臺北市', '宜蘭縣']
hideDistrict array 隱藏的鄉鎮市區名稱或郵遞區號,例如 ['大安區', '110']

方法

data

取得已選取縣市的郵遞區號 JSON 物件。

var foo = $(selector).twzipcode('data');

get

取得郵遞區號、縣市或鄉鎮市區元素。


// 取得縣市(返回 string)
$(selector).twzipcode('get', 'county');
// 取得縣市、鄉鎮市區(返回 Array)
$(selector).twzipcode('get', 'county,district');
$(selector).twzipcode('get', [
    'county',
    'district'
]);
$(selector).twzipcode('get', function (county, district, zipcode) {
    console.log(county);
    console.log(district);
    console.log(zipcode);
});

set

設置郵遞區號或縣市、鄉鎮市區。

// 直接設置郵遞區號
$(selector).twzipcode('set', 110);
// 或是
$(selector).twzipcode('set', {
    'zipcode': '110'
});

// 縣市
$(selector).twzipcode('set', {
    'county': '臺北市'
});

// 縣市及鄉鎮市區
$(selector).twzipcode('set', {
    'county': '臺北市',
    'district': '信義區'
});

// ※新竹市、嘉義市等共享郵遞區號的區域,請至少傳入縣市或鄉鎮市區輔助判斷。
$(selector).twzipcode('set', {
    'district': '北區',
    'zipcode': 300
});
// 或是傳入完整的參數
$(selector).twzipcode('set', {
    'county': '嘉義市'
    'district': '西區',
    'zipcode': 600
});

serialize

取得 Query String。

var foo = $(selector).twzipcode('serialize');

reset

重置清單項目。

$(selector).twzipcode('reset');

destroy

從元素移除 TWzipcode plugin。

$(selector).twzipcode('destroy');

留言

comments powered by Disqus