台灣縣市地區選單,不需資料庫。
bower install tw-city-selector --save
套件依賴 jQuery,在網頁中引入js檔案如下 (jquery 請更換適合的加載路徑)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="tw-citySelector.min.js"></script>
網頁中置入「縣市選單」、「區域選單」、「郵遞區號輸入框(選擇性)」
<form id="myForm">
<select id="county" name="county"></select>
<select id="district" name="district"></select>
<!-- 若不需使用郵遞區號欄位可刪除下列input或設type="hidden" -->
<!-- 若需允許修改則刪去readonly 屬性 -->
<input id="zip" name="zip" value="" type="text" placeholder="郵遞區號" readonly>
</form>
參數設定如下: $('父元素').tw_citySelector('縣市選單', '區域選單', '郵遞區號input'); 父元素可以設選單外包裹的dom,如form、div、section...等等 可同時設定多組作用dom
$(function() {
<!-- 這樣可以 -->
$('.wrapper').tw_citySelector('.county', '.district', '.zip');
<!-- 這樣也可以 -->
$('form').tw_citySelector('select[name="county"]', 'select[name="district"]', 'input[name="zip"]');
});
(目前只限縣市,無法設定其下區域)
縣市選單加上 data-custom 屬性,並輸入要顯示的縣市名稱在其值中 *正確縣市名稱請參照 tw-citySelector.js 檔案
<!-- 縣市選單只出現「台北市,台中市,高雄市」 -->
<select class="county" name="county" data-custom="台北市,台中市,高雄市"></select>
選單加上 data-selected 屬性,並輸入要選定的縣市名稱在其值中 *正確縣市名稱請依參照dk-tw-citySelector.js檔案
<!-- 縣市選單選定值為「台北市」 -->
<select class="county" name="county" data-selected="台北市"></select>
<!-- 區域選單選定值為「中山區」 -->
<select class="district" name="district" data-selected="中山區"></select>
上面兩種進階用法可同時設定。