【jquery】jquery.jpostal.jsを使用して郵便番号から住所を自動登録 都道府県 市区町村 カタカナまで

運用しているWebシステムが自動登録になっていないため

郵便番号から住所までいちいち入力しないといけません。

そこで郵便番号から住所を自動入力されるようにした時のメモになります。

今回使用したのが「jquery.jpostal.js」になります。

住所のカタカナも自動入力したかったのですが、上記がそれにも対応していました(^^)

GitHub - ninton/jquery.jpostal.js: 郵便番号から住所入力するjQueryプラグイン

■使い方

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>

<script type="text/javascript">   

$(function () {       

$('#【zip1】').jpostal({           

postcode: [               

'#【zip1】'           

],           

address: {               

'#【pref】' : '%3',               

'#【address】': '%4%5%6',               

'#【addresskana】': '%ASKV8 %ASKV9 %ASKV10'           

}       

});   

});

</script>

郵便番号<br>

<input type="text" id="zip1" name="zip1"><br>

都道府県<br>

<select id="pref" name="pref">

<option value="">----</option>

<option value="北海道">北海道</option>

<option value="青森県">青森県</option>

<option value="鹿児島県">鹿児島県</option>

<option value="沖縄県">沖縄県</option>

</select>

<input type="text" id="address" name="address"><br>

住所カタカナ<br>

<input type="text" id="addresskana" name="addresskana">

入力項目フォーマット

書式	意味
%3	都道府県
%4	市区町村
%5	町域
%6	大口事業所の番地
%7	大口事業所の名称
%8	都道府県カナ
%9	市区町村カナ
%10	町域カナ(予定)