搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. [外掛] jQuery TWzipcode 免資料庫，只需載入外掛模組，立即產生臺灣 3 碼郵遞區號

[外掛] jQuery TWzipcode 免資料庫，只需載入外掛模組，立即產生臺灣 3 碼郵遞區號

2019/08/21

梅問題－[外掛] jQuery TWzipcode 免資料庫，載入後立即產生臺灣 3 碼郵遞區號
　　當今天在製作銷售頁面時，在必填的欄位中，除了姓名、電話、Email，再來就是地址了，同時為了加速郵務的處理時間，郵局都會要求填寫區碼，但說真的有不少人，應該也不清楚所在地的區號是多少，就隨便的輸入三碼，因此為了解決區碼問題，最好的作法，就是變成下拉選單的型式，讓消費者選擇，如此一下就能解決區碼亂填的問題。

  當要製作區碼，首先得將全台區碼建立好資料庫，才能方便即時的查詢，但只為了區碼建立資料庫，似乎有點麻煩，因此梅干找了好久，發現一個超棒的jQuery外掛，只需將它載入後，立即就能顯示全台的區碼，甚至還可以自訂選單的起始值與CSS名稱，相當的簡單易用。

jQuery TWzipcode
外掛名稱：jQuery TWzipcode
外掛連結：https://code.essoduke.org/twzipcode/
Step1
首先，得先載入jQuery與TWzipcode的js。
Step2
接著再建立HTML標籤。
<div id="twzipcode"></div>
Step3
啟用TWzipcode。
$("#twzipcode").twzipcode();
Step4
完成後，就會看到原來的div標籤，瞬間變成下拉選單。
梅問題-[外掛] jQuery TWzipcode 免資料庫，載入後立即產生臺灣 3 碼郵遞區號
Step2
在選擇完市與區後，後方就會顯示區碼啦！而這他的基本使用。
梅問題-[外掛] jQuery TWzipcode 免資料庫，載入後立即產生臺灣 3 碼郵遞區號
Step3
而另一個比較進階的用法，則是可以將區碼整合到區別選單中，甚至還可指定CSS的名稱。
$("#twzipcode").twzipcode({
zipcodeIntoDistrict: true, // 郵遞區號自動顯示在區別選單中
css: ["city form-control", "town form-control"], // 自訂 "城市"、"地別" class 名稱 
countyName: "city", // 自訂城市 select 標籤的 name 值
districtName: "town" // 自訂區別 select 標籤的 name 值
});
Step5
當設定完畢後，分別就會看到，進階版的區碼則與區別顯示在一起，甚至還可分別指定域市與區別的CSS名稱。
梅問題-[外掛] jQuery TWzipcode 免資料庫，載入後立即產生臺灣 3 碼郵遞區號
Step6
除了剛剛進階應用的屬性外，這外掛本身還提供了15個參數可作設定。
梅問題-[外掛] jQuery TWzipcode 免資料庫，載入後立即產生臺灣 3 碼郵遞區號
#範例預覽


jquery外掛, jQuery教學, TWzipcode教學, TWzipcode模組, 台灣區碼外掛, jquery,