Usage

HTML

<!-- HTML -->
<div class="twzipcode"></div>

<!-- HTML5 data-* -->
<div class="twzipcode">
    <div data-role="county"
         data-label="初始化標題"
         data-name="表單名稱"
         data-value="預設值"
         data-css="CSS 樣式"
         data-hidden="隱藏的縣市"
         data-required="1|0"></div>

    <div data-role="district"
         data-label="初始化標題"
         data-name="表單名稱"
         data-value="預設值"
         data-css="CSS 樣式"
         data-hidden="隱藏的縣市"
         data-required="1|0"></div>

    <div data-role="zipcode"
         data-name="表單名稱"
         data-value="預設值"
         data-css="CSS 樣式"
         data-placeholder="欄位說明"
         data-type="text|number"
         data-min="最小值,只有 type=number 時有效"
         data-max="最大值,只有 type=number 時有效"
         data-step="步進值,只有 type=number 時有效"
         data-maxlength="最大長度,只有 type=text 時有效"
         data-pattern="Regular expression"
         data-readonly="1|0"></div>
</div>

Javascript

// RequireJS
require(['twzipcode'], function (TWzipcode) {

    var zipcode = new TWzipcode('.twzipcode', {OPTIONS});

});

Options

{
    // 縣市
    'county': {
        'label'    : '初始化標題',   // (string) 預設 `縣市`
        'name'     : '表單名稱',     // (string) 預設 `county`
        'value'    : '預設值',       // (string)
        'css'      : 'CSS 樣式',     // (string)
        'hidden'   : '要隱藏的縣市', // (Array|string) 可使用陣列或 , 字串。例如 ['臺北市','新北市'] or '臺北市,新北市',
        'required' : true|false,     // 是否為表單必須
        // 事件
        'onSelect' : function (e) { // change 事件
            // HTMLSelectElement
            console(this.value);
        }
    },
    // 鄉鎮市區
    'district': {
        'label'    : '初始化標題',   // (string) 預設 `鄉鎮市區`
        'name'     : '表單名稱',     // (string) 預設 `district`
        'value'    : '預設值',       // (string)
        'css'      : 'CSS 樣式',     // (string)
        'hidden'   : '要隱藏的區域', // (Array|string) 可使用陣列或 , 字串。例如 ['信義區','三星鄉'] or '信義區,三星鄉',
        'required' : true|false,     // 是否為表單必須
        // 事件
        'onSelect' : function (e) { // change 事件
            // HTMLSelectElement
            console(this.value);
        }
    },
    // 郵遞區號
    'zipcode': {
        'name'       : 'zipcode',  // 表單名稱
        'value'      : '預設值',   // 預設值
        'css'        : '',         // 樣式名稱
        'hidden'     : true|false, // 隱藏
        // 以下為 input attributes
        'type'       : 'number',   // input type[text,number…]
        'min'        : 0,          // 只有 input=number 時有效
        'max'        : 0,          // 只有 input=number 時有效
        'step'       : 1,          // 只有 input=number 時有效
        'placeholder': '',
        'maxlength'  : 3,          // 只有 input=text 時有效
        'pattern'    : '\\d+',
        'readonly'   : true|false,
        'required'   : true|false,
        // 事件
        'onKeyUp'    : function (event, countyValue, districtValue) {
            // HTMLInputElement
            console(this.value);
        },
        'onFocus'    : function (event) {
            // HTMLInputElement
            console(this.value);
        },
        'onBlur'     : function (event) {
            // HTMLInputElement
            console(this.value);
        }
    },
    // 僅用於 `detect` 查詢使用
    'GMAP_KEY'  : 'Google Maps API Key',
    // 自動偵測位置
    'detect'    : true|false,
    // 是否將郵遞區號合併入鄉鎮市區清單?
    'combine'   : true|false,
    // 是否顯示離島(預設 Yes)
    'island'    : true|false,
    // 自訂郵遞區號 JSON
    'data'      : {
        "COUNTY" : {"DISTRICT": "ZIPCODE", …},
        "COUNTY" : {"DISTRICT": "ZIPCODE", …}…
    }
}

Public methods

get

// Initialize
var zipcode = new TWzipcode(…);

/*! 取得單一屬性值 */
var county = zipcode.get('county');
var district = zipcode.get('district');
var zipcode = zipcode.get('zipcode');

/*! 取得所有值 */
var data = zipcode.get();
/* data (Array)
    [
        {
            "county": "縣市",
            "district": "鄉鎮市區",
            "zipcode": "郵遞區號",
        }
    ]…
*/

/*! Callback */
zipcode.get(function (data) {
/* data (Array)
    [
        {
            "county": "縣市",
            "district": "鄉鎮市區縣市",
            "zipcode": "郵遞區號",
        }
        …
    ]
*/
});

set

var zipcode = new TWzipcode(…);
// 直接設置郵遞區號
zipcode.set(100);

// 設置縣市、鄉鎮市區
zipcode.set({
    'county': '高雄市',
    'district': '那瑪夏區'
});

destroy

zipcode.destroy();