#twcityselector

為了解決這個問題，這次介紹一個簡單的 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，都能滿足需求。郵遞區號自動填充功能更是大幅減少了手動操作的風險。

在多選單場景下，只需為每個選單設置不同的容器，便能實現互不干擾的功能。遇到需要改寫選擇器值的情況，重新初始化即可，操作非常直觀。結合後端資料處理時，透過表單序列化技術能快速傳遞資料，適用於動態存取和修改的場景。