jQuery 郵便番号から住所を自動入力 AjaxZip2.0

※AjaxZip3.0の記事があります。
関連記事
jQuery 郵便番号から住所を自動入力 AjaxZip3.0
http://office-goto.info/javascript-jquery/ajaxzip3-0/

ここでは郵便番号から住所を自動入力してくれるAjaxZip2.0の紹介をしていきます。

ajaxzip2

デモはこちら
http://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;" />
&nbsp;-&nbsp;
<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を指定してください。

コメントを残す

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

*