當開發選擇地址的下拉選單時，處理縣市與區域的對應資料往往是件既費工又費時的事。手動整理縣市與區域關係表，並撰寫相關邏輯來實現兩層選單的同步，不僅繁瑣，也容易出錯。如果需要進一步結合自己的樣式或動態取值方式，更是增加了實作的難度。為了解決這個問題，這次介紹一個簡單的 js 套件可以簡單地引入自己開發的系統，這個套件不僅輕量化，無需繁複的設定，就能快速生成縣市與區域的下拉選單，而且支援多語系、客製化樣式與彈性配置。無論是表單資料送出，還是與其他元件的互動，都能輕鬆整合。
透過簡單的引入與設定，你可以自由搭配自己的 CSS 樣式，並隨時取得所選的縣市和區域資料，這不僅大幅減少開發時間，也讓後續維護更加方便。如果你經常需要處理地址選單，不妨試試這款套件，為你的開發工作減輕負擔！
步驟
前往 https://github.com/dennykuo/tw-city-selector
提取dist資料夾內的tw-city-selector.js即可
在頁面引用tw-city-selector.js檔案
這邊以bootstrap的樣式引用為例
html的部分
<div class="city-selector-set col-md-12 row">
<label class="form-label col-md-12">地址</label>
<div class="col-md-4">
<!-- 縣市選單 -->
<select class="mmrcus-county form-control"></select>
</div>
<div class="col-md-4">
<!-- 區域選單 -->
<select class="mmrcus-district form-control"></select>
</div>
<div class="col-md-4">
<!-- 郵遞區號欄位 (建議加入 readonly 屬性，防止修改) -->
<input class="mmrcus-zipcode form-control" name="contAddrCode" type="text" size="3" readonly placeholder="郵遞區號">
</div>
<div class="col-md-12">
<input type="text" class="form-control" name="contAddrDtl" placeholder="詳細地址">
</div>
</div>
js內加入
new TwCitySelector({
el: '.city-selector-set',
elCounty: '.mmrcus-county',
elDistrict: '.mmrcus-district',
elZipcode: '.mmrcus-zipcode',
countyFieldName: 'contAddrCity',
districtFieldName: 'contAddrArea',
countyValue: countyValue, // 注意此項為關聯參數
districtValue: districtValue
});
其中各項參數的意義
el:要尋找用來填寫地址的html元素的外層元素，後續所有的元件都會從這個元素裡面去找跟設置
elCounty:要設為縣市選單的下拉選單，要記得給個初始的select讓他去綁定
elDistrict:要設為區域選單的下拉選單
elZipcode:要設為郵遞區號選單的input欄位，建議設為readonly讓前兩個選項選完自動去代入，防止使用者誤改，此為非必要參數，可以不一定要有
countyFieldName:城市欄位的name屬性值，設定完成後可方便js取value
districtFieldName:區域欄位的name屬性值，設定完成後可方便js取value
countyValue:城市的預設值，可用來代入歷史資料
districtValue:區域的預設值，可用來代入歷史資料
建立完成後套件會類似這樣
常用操作
如果一個頁面上要有多個地址選擇器，就在js上new多個TwCitySelector即可，但要注意外層容器要分開不然選擇時會覆蓋掉，後宣告的會覆蓋先宣告的。
遇到要改寫選擇器值的情況，只要重新new一次，其他設定照舊，改變countyValue跟districtValue即可。
取值儲存到後端時，若是使用ajax可以使用之前提到的小技巧：
var formArray = $('#mmr-edit-form').serializeArray();
$.each(formArray, function(i, field) {
data[field.name] = field.value;
});
將整個form的資料按照name的方式傳送，由於我們有使用countyFieldName跟districtFieldName設定，資料傳到後端後再取出做處理儲存即可。
進階操作
透過以上教學，我們可以一步設計，讓用戶可以透過我們自訂的select選取該用戶儲存好的預設值資料，再進行修改，例如：
$(document).on('change', '#shipaddressSelect', function() {
var selectedOption = $(this).find('option:selected');
var city = selectedOption.data('city');
var area = selectedOption.data('area');
if (city && area) {
new TwCitySelector({
el: '.woocommerce-shipping-fields__field-wrapper',
elCounty: '#shipping_state',
elDistrict: '#shipping_city',
elZipcode: '#shipping_postcode',
countyFieldName: 'shipping_state',
districtFieldName: 'shipping_city',
countyValue: city,
districtValue: area
});
}
});
結論
TwCitySelector 是一款輕量化且功能強大的地址選單套件，專為處理縣市與區域對應的需求設計。其簡單的初始化方式和靈活的參數設置，讓開發者能快速整合到自己的系統中。套件提供了良好的樣式兼容性，無論是使用預設設計，還是結合自訂 CSS，都能滿足需求。郵遞區號自動填充功能更是大幅減少了手動操作的風險。
在多選單場景下，只需為每個選單設置不同的容器，便能實現互不干擾的功能。遇到需要改寫選擇器值的情況，重新初始化即可，操作非常直觀。結合後端資料處理時，透過表單序列化技術能快速傳遞資料，適用於動態存取和修改的場景。
進階使用中，TwCitySelector 支持根據用戶預設值動態初始化，例如 AJAX 請求完成後自動更新選單值，使其更適合電商地址管理等應用場景。整體而言，這款套件不僅降低了開發複雜度，還提供了高度靈活性，對開發者來說是一個不可多得的高效工具，適合各種需要地址選單的應用系統。