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


步驟一: 載入 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>

此外,提供了一些參數:

data-exclude

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

<input data-exclude="澎湖縣,929,綠島鄉" class="js-demeter-tw-zipcode-selector" data-city="#city1" data-dist="#dist1" placeholder="請輸入郵遞區號" />
<select id="city1" placeholder="請選擇縣市"></select>
<select id="dist1" 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

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