<form action="">
<label>基本應用</label>
<div id="twzipcode"></div>
<label>進階應用</label>
<div id="twzipcode_ADV"></div>
</form>

@import url(https://fonts.googleapis.com/css?family=Lily+Script+One);
form {
  margin:10% auto 0 auto;
  padding:30px;
  width:400px;
  height:auto;
  overflow:hidden;
  background:white;
  border-radius:10px;
}

form label {
  font-size:14px;
  color:darkgray;
  cursor:pointer;
}

form label,
form input,
form select{
  float:left;
}
form div{
  clear:both;
  overflow:hidden;
  padding:10px;
  margin-bottom:10px;
  background:#efefef;
  border-radius:5px;
}

form input ,
form select{
  margin:15px 0;
  padding:15px 10px;

  outline:none;
  border:1px solid #bbb;
  border-radius:5px;
  height:40px;
  display:inline-block;
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
    -webkit-transition:0.2s ease all;
     -moz-transition:0.2s ease all;
      -ms-transition:0.2s ease all;
       -o-transition:0.2s ease all;
          transition:0.2s ease all;
}

form input[type=text]:focus,
form input[type="password"]:focus {
  border-color:cornflowerblue;
}

input[type=submit] {
  padding:15px 50px;
  width:auto;
  background:#1abc9c;
  border:none;
  color:white;
  cursor:pointer;
  display:inline-block;
  float:right;
  clear:right;
  -webkit-transition:0.2s ease all;
     -moz-transition:0.2s ease all;
      -ms-transition:0.2s ease all;
       -o-transition:0.2s ease all;
          transition:0.2s ease all;
}

input[type=submit]:hover {
  opacity:0.8;
}

input[type="submit"]:active {
  opacity:0.4;
}

$("#twzipcode").twzipcode();

$("#twzipcode_ADV").twzipcode({
zipcodeIntoDistrict: true, // 郵遞區號自動顯示在地區
css: ["city form-control", "town form-control"], // 自訂 "城市"、"地區" class 名稱 
countyName: "city", // 自訂城市 select 標籤的 name 值
districtName: "town" // 自訂地區 select 標籤的 name 值
});