[會員登入] [正體/简体]

Jquery 地址索引功能使用範例

你需要先有se值,se值可由[申請試用]或[購買])取得。
載入JS
<script src="http://zipko.info/js/twaddr.2.0.min.js?se=你的se值"></script>
寫法說明
基本寫法 HTML <form> <div id="twaddress"></div> <button type="submit">送出</button> </form> Javascript $('#twaddress').twaddress(); 呈現結果
送出內容範例 [county] => 13 [district] => 236 [address] => 屏東縣九如鄉 [zipcode] => 904
三碼郵遞區號地址選單 -- 三層分選 HTML <form> <div id="twaddress"></div> <button type="submit">送出</button> </form> Javascript $('#twaddress').twaddress({ level:3 }); 呈現結果
送出內容範例 [county] => 1 [district] => 1 [road] => 3 [address] => 台北市士林區中山北路5段 [zipcode] => 111
五碼郵遞區號地址選單 -- 詳細地址選填 HTML <form> <div id="twaddress"></div> <button type="submit">送出</button> </form> Javascript $('#twaddress').twaddress({ level:4 }); 呈現結果
送出內容範例 [county] => 1 [district] => 1 [road] => 12 [a] => ( [lane] => 1 [ally] => 2 [st] => 3 [no] => 4 [no2] => 5 [floor] => 6 ) [address] => 台北市士林區中興街1巷2弄3衖4號之5 6樓 [zipcode] => 11162
五碼郵遞區號地址選單 -- 自行輸入地址 HTML <form> <div id="twaddress"></div> <button type="submit">送出</button> </form> Javascript $('#twaddress').twaddress({ level:5, englishAddress:true, englishMode :'hanflat' }); 呈現結果
送出內容範例 [address] =>台北市信義區莊敬路341巷16號1樓 [zipcode] =>11050 [englishAddressName] =>1F., No.16, Ln.341, Zhuangjing Rd., Xinyi Dist., Taipei 11050, Taiwan
五碼郵遞區號地址選單 + 輸入剩餘地址 * level:6 模式不支援產生英譯地址
HTML <form> <div id="twaddress"></div> <button type="submit">送出</button> </form> Javascript $('#twaddress').twaddress({ level:6 }); 呈現結果
送出內容範例 [county] => 1 [district] => 6 [road] => 451 [restAddr] => 110號 [fullAddr] => 台北市內湖區內湖路2段110號 [zipcode] => 11464
設置元素的預設值 HTML <form> <div id="twaddress"></div> <button type="submit">送出</button> </form> Javascript $('#twaddress').twaddress({ level:4, countySel : '台中市', districtSel: '西屯區' }); 呈現結果
自訂輸入欄位 HTML <form> <div id="twaddress"></div> 結果地址:<input type="text" name="address" id="address" size="60" /> <button type="button" id="getZode">取得Zipcode</button> (<input type="text" name="zip" id="zip1" size="3" />) <button type="submit">送出</button> </form> Javascript $('#twaddress').twaddress({ level:4, zipcodeName:'#zip1', addressName:'#address', getZipBtn:'#getZode' //For level4 only }); 呈現結果
結果地址: ()
自訂各別項目的CSS Class HTML <style> .county-sel,.lane-txt { background-color:#FFCCCC; } .dist-sel,.ally-txt { background-color:#CCFFCC; } .road-sel,.st-txt { background-color:#CCCCFF; } .no-txt,.addr-column { background-color:green; } .no2-txt,.zip-column { background-color:yellow; } .flr-txt,.eng-column { background-color:cyan; } .getcode-btn {font-size:2em; background-color:orange; } </style> <form> <div id="twaddress"></div> <button type="submit">送出</button> </form> Javascript $('#twaddress').twaddress({ level:4, selcss: ['county-sel', 'dist-sel', 'road-sel'], textcss:['lane-txt', 'ally-txt', 'st-txt', 'no-txt', 'no2-txt', 'flr-txt'], outputcss:['addr-column', 'zip-column', 'eng-column', 'getcode-btn'] }); 呈現結果
結合Bootstrap CSS level:2,3,5 HTML <form> <div id="twaddress"></div> <button type="submit" class="btn btn-primary">送出</button> </form> Javascript $('#twaddress').twaddress({level:3}).find("select,input") .addClass("form-control col-md-3"); 呈現結果

結合Bootstrap CSS level:3 修改欄位寬度 HTML <form class="form-inline"> <div id="twaddress"></div> <button type="submit" class="btn btn-primary">送出</button> </form> Javascript $('#twaddress').twaddress({level:3}).find("select, input").addClass("form-control"); $('#twaddress').find("input[name='address']").addClass("col-md-5"); 呈現結果

結合Bootstrap CSS level:4

要使輸入欄目使用BOOTSTRAP,level:4中詳細地址選填中的所有欄位均需要另外指定目標input。

HTML <form class="form-inline"> <div class="form-row"> <div id="twaddress"></div> <div class="input-group col-md-1"> <input type="text" name="lane" id="lane" class="form-control" value=""/> <div class="input-group-append"> <span class="input-group-text">巷</span> </div> </div> <div class="input-group col-md-1"> <input type="text" name="ally" id="ally" class="form-control" value=""/> <div class="input-group-append"> <span class="input-group-text">弄</span> </div> </div> <div class="input-group col-md-1"> <input type="text" name="st" id="st" class="form-control" value=""/> <div class="input-group-append"> <span class="input-group-text">衖</span> </div> </div> <div class="input-group col-md-1"> <input type="text" name="no" id="no" class="form-control" value=""/> <div class="input-group-append"> <span class="input-group-text">號</span> </div> </div> <div class="input-group col-md-1"> <div class="input-group-preppend"> <span class="input-group-text">之</span> </div> <input type="text" name="id2" id="no2" class="form-control" value=""/> </div> <div class="input-group col-md-1"> <input type="text" name="floor" id="floor" class="form-control" value=""/> <div class="input-group-append"> <span class="input-group-text">樓</span> </div> </div> </div> <br/> <div class="input-group"> <label>結果地址</label> <input type="text" name="address" id="addr1" size="60" class="form-control" /> </div> <input type="text" name="zip" id="zip1" size="3" class="form-control" readonly /> <button type="button" id="getZode" class="btn btn-success">取得Zipcode</button> <button type="submit" class="btn btn-primary">送出</button> </form> Javascript $('#twaddress').twaddress({level:4, itemName:['#lane','#ally','#st','#no','#no2','#floor'], //限level:4 zipcodeName:'#zip1', addressName:'#addr1', getZipBtn:'#getZode' }).find("select").addClass("form-control"); 呈現結果

送出內容範例 [county] => 4 [district] => 71 [road] => 8736 [lane] => 1 [ally] => 2 [st] => 3 [no] => 4 [id2] => 5 [floor] => 6 [address] => 高雄市三民區十全一路1巷2弄3衖4號之5,6樓 [zip] => 80761 )
結合Bootstrap CSS level:5

level:5 中由使用者自行輸入地址,可指定項目的Class。

HTML <form> <div id="twaddress"></div> <button type="submit" class="btn btn-primary">送出</button> </form> Javascript $('#twaddress').twaddress({level:5, englishAddress:true, englishMode :'hanflat' }).find("input").addClass("form-control"); $('#twaddress').find("input[name='address']").addClass("col-md-5"); $('#twaddress').find("input[name='zipcode']").addClass("col-md-1"); $('#twaddress').find("input[name='englishAddressName']").addClass("col-md-6"); $('#twaddress').find("button").addClass("btn btn-info"); 呈現結果

PHP使用範例
<html> <head> <meta charset="utf-8"> <title>高精準智能郵碼搜尋系統使用範例</title> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="http://zipko.info/js/twaddr.2.0.js?se=你的se值"></script> <script> $(document).ready(function () { $('#twaddress').twaddress(); }); </script> </head> <body> <form action="#" method="post"> <span id="twaddress"></span> <input type="submit" value="傳送" /> </form> <?php if (isset($_POST['submit'])):?> <pre> <?php print_r($_POST); ?> </pre> <?php endif ?> </body> </html>
可用選項
  1. 'level': 輸出類型,可用 2,3,4,5,6
  2. 'countySel': 指定預設縣市
  3. 'districtSel': 指定預設鄉鎮市區
  4. 'selcss': 指定選擇項目的class
  5. 'textcss': 指定輸入文字區class
  6. 'outputcss': 指定輸出文字區class
  7. 'addressName': 自定輸出地址欄位
  8. 'zipcodeName': 自定輸出郵碼欄位
  9. 'itemName': 自定輸入文字欄位,巷、弄、衖、號、號之、樓(for level4)
  10. 'getZipBtn': 自訂取得zipcode自定按鈕(for level4)
  11. 'englishAddressName': 自定輸出英譯地址欄位
  12. 'englishAddress': 啟用英譯地址功能
  13. 'englishMode' : 英譯地址方式,有漢語拼音hanflat(預設),注音二式拼音(zhu2),通用拼音(genflat)可選
  14. 'addrText': level4,5預設地址文字
  15. 'node': 號之及樓分隔
  16. 'readonly': 填寫郵碼和地址區域是否唯讀
  17. 'selrequired': 縣市地區是否必選
當您查了很多次以後,點個廣告,感謝您!
或請我們一杯咖啡,只花您三分鐘+$50
台灣最熱門也最準確查詢郵碼網站,歡迎投放廣告
300x90~300