tw-city-selector.js

https://dennykuo.github.io/tw-city-selector/#/advanced?id=%e6%8c%87%e5%ae%9a%e7%88%b6%e5%b1%a4-element

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tw-city-selector.min.js"></script>

<div class="city-selector-set">
	<div>
		<!-- 縣市選單 -->
		<select class="county form-control" data-value="{{ val($model, 'city') }}"></select>
	</div>
	<div>
		<!-- 區域選單 -->
		<select class="district form-control" data-value="{{ val($model, 'district') }}"></select>
	</div>
	<div>
		<!-- 郵遞區號欄位 (建議加入 readonly 屬性,防止修改) -->
		<input class="zipcode form-control" type="text" size="3" readonly placeholder="郵遞區號" value="{{ val($model, 'zip') }}">
	</div>
</div>

Javascript

$(document).ready(function () {
    new TwCitySelector({
        el: '.city-selector-set',
        elCounty: '.county', // 在 el 裡查找 element
        elDistrict: '.district', // 在 el 裡查找 element
        elZipcode: '.zipcode', // 在 el 裡查找 element
        countyFieldName: 'city', 
        zipcodeFieldName: 'zip'
    });
});