當開發選擇地址的下拉選單時，處理縣市與區域的對應資料往往是件既費工又費時的事。手動整理縣市與區域關係表，並撰寫相關邏輯來實現兩層選單的同步，不僅繁瑣，也容易出錯。如果需要進一步結合自己的樣式或動態取值方式，更是增加了實作的難度。

為了解決這個問題，這次介紹一個簡單的 js 套件可以簡單地引入自己開發的系統，這個套件不僅輕量化，無需繁複的設定，就能快速生成縣市與區域的下拉選單，而且支援多語系、客製化樣式與彈性配置。無論是表單資料送出，還是與其他元件的互動，都能輕鬆整合。

透過簡單的引入與設定，你可以自由搭配自己的 CSS 樣式，並隨時取得所選的縣市和區域資料，這不僅大幅減少開發時間，也讓後續維護更加方便。如果你經常需要處理地址選單，不妨試試這款套件，為你的開發工作減輕負擔！

步驟

前往 https://github.com/dennykuo/tw-city-selector

提取dist資料夾內的tw-city-selector.js即可

在頁面引用tw-city-selector.js檔案

這邊以bootstrap的樣式引用為例

html的部分

　地址
　

　　
　　
　
　

　　
　　
　
　

　　
　　
　
　

　　
　

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 請求完成後自動更新選單值，使其更適合電商地址管理等應用場景。整體而言，這款套件不僅降低了開發複雜度，還提供了高度靈活性，對開發者來說是一個不可多得的高效工具，適合各種需要地址選單的應用系統。