台灣縣市鄉鎮選單.js

介紹一下自家工具：快速生成台灣縣市鄉鎮選擇器。

步驟一: 載入 jQuery

這裡就不贅述，可自行 google。

步驟二: 載入主要 js

<script src="https://demeter.5fpro.com/tw/zipcode-selector.js"></script>

步驟三: 套用到郵遞區號的 input

<input class="js-demeter-tw-zipcode-selector" data-city="#city" data-dist="#dist" placeholder="請輸入郵遞區號" />
<select id="city" placeholder="請選擇縣市"></select>
<select id="dist" placeholder="請選擇鄉鎮區"></select>

以下就是最基本的呈現了

介面使用說明

可以在郵遞區號輸入數字後，下拉選單會自動對應。抑或反向操作：在下拉選單選好縣市和鄉鎮後，郵遞區號自動帶出。如果是期望有預設值，直接在郵遞區號欄填入即可。以下示範:

<input class="js-demeter-tw-zipcode-selector" data-city="#city3" data-dist="#dist3" placeholder="請輸入郵遞區號" value="220" >
<select id="city3" placeholder="請選擇縣市"></select>
<select id="dist3" placeholder="請選擇鄉鎮區"></select>

存 3+2 碼也是可以支援的

<input class="js-demeter-tw-zipcode-selector" data-city="#city4" data-dist="#dist4" placeholder="請輸入郵遞區號" value="22048" >
<select id="city4" placeholder="請選擇縣市"></select>
<select id="dist4" placeholder="請選擇鄉鎮區"></select>

此外，提供了一些參數：

data-exclude

以半型逗號隔開可以排除一些縣市或鄉鎮區，可以是郵遞區號或縣市鄉鎮區名稱。

<input data-exclude="澎湖縣,929,綠島鄉" class="js-demeter-tw-zipcode-selector" data-city="#city5" data-dist="#dist5" placeholder="請輸入郵遞區號" />
<select id="city5" placeholder="請選擇縣市"></select>
<select id="dist5" placeholder="請選擇鄉鎮區"></select>

data-selected-city

沒有郵遞區號，但預設先選了某個縣市

<input data-selected-city="新北市" class="js-demeter-tw-zipcode-selector" data-city="#city6" data-dist="#dist6" placeholder="請輸入郵遞區號" />
<select id="city6" placeholder="請選擇縣市"></select>
<select id="dist6" placeholder="請選擇鄉鎮區"></select>

關於 demeter

demeter 是我們公司-伍樓專業的一項開源專案 (https://github.com/5fpro/demeter) 

內建各類靜態資料的爬蟲，再將爬下來的資料包成 json 後更新至 CDN。

目標將全世界的靜態資料建齊，目前已經完成的部份都是台灣相關居多：

1. 郵遞區號資料: https://demeter.5fpro.com/tw/zipcodes.json
2. 縣市資料: https://demeter.5fpro.com/tw/zipcode/cities.json
3. 銀行與分行資料: https://demeter.5fpro.com/banks.json
4. 國家資料: https://demeter.5fpro.com/countries.json

索引: https://demeter.5fpro.com/index.json

而本篇文章即是郵遞區號資料的應用。