郵便番号の入力で都道府県、住所を自動入力する jQueryと郵便番号ライブラリ(Library)

WEBサイトで郵便番号を入力すると住所が自動で表示するサンプルです

郵便番号と住所に特化しているので改造してつかってください

jQueryを読み込みます

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js” ></script>

郵便番号のライブラリを読み込みます

<script src=”https://ajaxzip3.github.io/ajaxzip3.js” charset=”UTF-8″></script>

郵便番号のテキスト配置

<input type=”text” name=”txt_zip” style=”font-size:24px;” value=”” onchange=”AjaxZip3.zip2addr(this,”,’ken’,’address1′);” />


実際の全体ソース

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>Zip Sample</title>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<!– Zip Library –>
<script src=”https://ajaxzip3.github.io/ajaxzip3.js” charset=”UTF-8″></script>

</head>
<body>

<div style=”padding:50px; text-align:center;”>

<input type=”text” name=”txt_zip” style=”font-size:24px;” value=”” onchange=”AjaxZip3.zip2addr(this,”,’ken’,’address1′);” />

<select name=”ken” id=”txt_ken” style=”font-size:24px;”>
<option></option>
<option value=”1″>北海道</option>
<option value=”2″>青森県</option>
<option value=”3″>岩手県</option>
<option value=”4″>宮城県</option>
<option value=”5″>秋田県</option>
<option value=”6″>山形県</option>
<option value=”7″>福島県</option>
<option value=”8″>茨城県</option>
<option value=”9″>栃木県</option>
<option value=”10″>群馬県</option>
<option value=”11″>埼玉県</option>
<option value=”12″>千葉県</option>
<option value=”13″>東京都</option>
<option value=”14″>神奈川県</option>
<option value=”15″>新潟県</option>
<option value=”16″>富山県</option>
<option value=”17″>石川県</option>
<option value=”18″>福井県</option>
<option value=”19″>山梨県</option>
<option value=”20″>長野県</option>
<option value=”21″>岐阜県</option>
<option value=”22″>静岡県</option>
<option value=”23″>愛知県</option>
<option value=”24″>三重県</option>
<option value=”25″>滋賀県</option>
<option value=”26″>京都府</option>
<option value=”27″>大阪府</option>
<option value=”28″>兵庫県</option>
<option value=”29″>奈良県</option>
<option value=”30″>和歌山県</option>
<option value=”31″>鳥取県</option>
<option value=”32″>島根県</option>
<option value=”33″>岡山県</option>
<option value=”34″>広島県</option>
<option value=”35″>山口県</option>
<option value=”36″>徳島県</option>
<option value=”37″>香川県</option>
<option value=”38″>愛媛県</option>
<option value=”39″>高知県</option>
<option value=”40″>福岡県</option>
<option value=”41″>佐賀県</option>
<option value=”42″>長崎県</option>
<option value=”43″>熊本県</option>
<option value=”44″>大分県</option>
<option value=”45″>宮崎県</option>
<option value=”46″>鹿児島県</option>
<option value=”47″>沖縄県</option>
</select>

<input type=”text” name=”address1″ value=”” style=”font-size:24px;” />
<input type=”text” name=”address2″ value=”” style=”font-size:24px;” />

</div>

</body>
</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です