※AjaxZip3.0の記事があります。
関連記事
jQuery 郵便番号から住所を自動入力 AjaxZip3.0
https://office-goto.info/javascript-jquery/ajaxzip3-0/
ここでは郵便番号から住所を自動入力してくれるAjaxZip2.0の紹介をしていきます。
デモはこちら
https://office-goto.info/demo/ajaxzip2/
AjaxZip2.0のダウンロード
http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html
head内で読み込み
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="ajaxzip2/ajaxzip2.js"></script>
ajaxzip2.jsを読み込んでください。
html
郵便番号 <input type="text" name="pos1" style="width:50px; ime-mode:disabled;" /> - <input type="text" name="pos2" style="width:50px; ime-mode:disabled;" onKeyUp="AjaxZip2.zip2addr('pos1','pref','city','pos2');"/> 都道府県 <select name="pref"> <option value="">--</option> <option value='北海道'>北海道</option><option value='青森県'>青森県</option> <option value='岩手県'>岩手県</option><option value='宮城県'>宮城県</option> <option value='秋田県'>秋田県</option><option value='山形県'>山形県</option> <option value='福島県'>福島県</option><option value='茨城県'>茨城県</option> <option value='栃木県'>栃木県</option><option value='群馬県'>群馬県</option> <option value='埼玉県'>埼玉県</option><option value='千葉県'>千葉県</option> <option value='東京都'>東京都</option><option value='神奈川県'>神奈川県</option> <option value='新潟県'>新潟県</option><option value='富山県'>富山県</option> <option value='石川県'>石川県</option><option value='福井県'>福井県</option> <option value='山梨県'>山梨県</option><option value='長野県'>長野県</option> <option value='岐阜県'>岐阜県</option><option value='静岡県'>静岡県</option> <option value='愛知県'>愛知県</option><option value='三重県'>三重県</option> <option value='滋賀県'>滋賀県</option><option value='京都府'>京都府</option> <option value='大阪府'>大阪府</option><option value='兵庫県'>兵庫県</option> <option value='奈良県'>奈良県</option><option value='和歌山県'>和歌山県</option> <option value='鳥取県'>鳥取県</option><option value='島根県'>島根県</option> <option value='岡山県'>岡山県</option><option value='広島県'>広島県</option> <option value='山口県'>山口県</option><option value='徳島県'>徳島県</option> <option value='香川県'>香川県</option><option value='愛媛県'>愛媛県</option> <option value='高知県'>高知県</option><option value='福岡県'>福岡県</option> <option value='佐賀県'>佐賀県</option><option value='長崎県'>長崎県</option> <option value='熊本県'>熊本県</option><option value='大分県'>大分県</option> <option value='宮崎県'>宮崎県</option><option value='鹿児島県'>鹿児島県</option> <option value='沖縄県'>沖縄県</option> </select> 市区町村 <input type="text" name="city" /> 番地等 <input type="text" name="address" />
解説
onKeyUp=”…” (4行目)
表示させるinputタグのnameで指定します。
このサンプルでは郵便番号を2つのフィールドで分けていますので、第1、第4引数にpos1、pos2と指定しています。
郵便番号のフィールドを分けない場合は第1引数にthisを指定してください。