js 網頁開發 網頁設計

[外掛] 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 碼郵遞區號
#範例預覽