jQuery TWzipcode: 台灣郵遞區號擴充套件

jQuery TWzipcode 是一個能輕鬆地建立多組台灣郵遞區號下拉清單的 jQuery 擴充套件,讀取快速、完全不需使用資料庫。

3+2 版本:Twzipcode32

版本歷史

參數說明

方法說明

下載位置

範例: 預設

javascript
$(function () {
  $('#container').twzipcode();
});
HTML
<div id="container"></div>

範例: 使用 Geolocation 偵測位置

javascript
$(function () {
  $('#container').twzipcode({
    detect: true
  });
});
HTML
<!-- 需先載入 Google Maps API -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

範例: 加入郵遞區號預設值,並可輸入郵遞區號取得縣市名稱

javascript
$(function () {
    $('#container').twzipcode({
      zipcodeSel: 114,
      readonly: false
    });
});
HTML
<div id="container"></div>

範例: 加入縣市預設值

javascript
$(function () {
    $('#container').twzipcode({
      countySel: '高雄市', //縣市預設值
      districtSel: '那瑪夏區' //鄉鎮市區預設值
    });
});
HTML
<div id="container"></div>

範例: 套用指定的樣式

javascript
$(function () {
$('#container').twzipcode({
      countySel: '台北市', //縣市預設值
      districtSel: '大安區', //鄉鎮市區預設值
      css: ['addr3-county', 'addr3-area', 'addr3-zip']
    });
});
HTML
<div id="container"></div>
CSS
.addr3-county, .addr3-area{width:90px;}
.addr3-county{background:#4169E1;color:#fff;}
.addr3-area{background:#008000;color:#fff;}
.addr3-zip{background:#c00;color:#fff;border:1px solid #666;}

範例: 使用自訂元素名稱送出表單

javascript
$(function () {
$('#container').twzipcode({
      countyName: 'addr4_county[]',
      districtName: 'addr4_area[]',
      zipName: 'addr4_zip[]'
    });
});
HTML

  <form action="script#demo4" method="post">
    <div id="container"></div>
    <div><input type="submit" /></div>
  </form>

意見