台灣縣市鄉鎮選單.js

近期更新

2026-8-31: 移除對 jQuery 的依賴
2026-5-3: 追加 data-selected-dist 參數

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

步驟一: 載入 jQuery

無須載入 jQuery (已於 2026/8/31 後擺脫 jQuery 需求)

步驟二: 載入主要 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="新北市" data-selected-dist="板橋區" class="js-demeter-tw-zipcode-selector" data-city="#city6" data-dist="#dist6" placeholder="請輸入郵遞區號" />
<select id="city6" placeholder="請選擇縣市"></select>
<select id="dist6" placeholder="請選擇鄉鎮區"></select>