JavaScript, jQueryサンプル

郵便番号から住所を検索してフォームに挿入

実装例

HTML

郵便番号:<input type="text" id="zip1" size="3" maxlength="3" value="">-
<input type="text" id="zip2" size="4" maxlength="4" value=""> 
<input type="button" id="search" value="住所を検索"><br>
都道府県:<select id="pref">
<option value="0" selected>(都道府県を選択)</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><br>
市区町村:<input type="text" id="city" value=""><br>
番地など:<input type="text" id="street" value="">

JSONデータ

jQuery

$(document).ready(function(){
	$('#search').click(function(){
		var zip1 = $('#zip1').val();
		var zip2 = $('#zip2').val();
		var zip = '' + zip1 + zip2;

		for (var z in zipdata) {
			if (zipdata[z]['zip'] == zip) {
				var pref = zipdata[z]['pref'];
				var city = zipdata[z]['city'];
				var street = zipdata[z]['street'];

				$('#pref option').filter(function(){
					return $(this).text() == pref;
				}).prop('selected', true);
				$('#city').val(city);
				$('#street').val(street);

				break;
			}
		}
	});
});