郵便番号検索で住所自動入力ZipcloudAPIを利用
目的
管理画面で郵便番号を入力すると該当する住所が自動でセットされる処理を実装する
画面イメージ：
Laravelコード
{{ Form::text(zip_code, array('id' => zip_code, 'onchange' => 'javascript:getAddName(this.value)')) }}
{{ Form::select(addr_state_id, $option->getOption('state'), array('id' => addr_state_id))}}
{{ Form::text(addr_city, array('id' => addr_city)) }}
上手く行かなかったJSコード
市区町村は下記で上手く行きましたが、
document.getElementById("addr_city").value = _addStateCity;
セレクトボックスの設定が下記でいけるはずが上手くいかなかった
document.getElementById("addr_state_id").selectedIndex = _addStateId;
原因
下記のように表示と値の部分が分かれていたのが原因のようだった
（内部ではinputを使っている）
input type="text" class="select-dropdown" readonly="true" data-activates="select-options-6cdbf968-4234-b326-ae12-5e7b5ccb6f56" value="神奈川県">
select id="addr_state_id" class="form-control initialized" name="addr_state_id">
option value="14" selected="selected">神奈川県</option>
解決
値の部分の書換え
var _stateId = document.getElementById("addr_state_id").value;
document.getElementById('addr_state_id').options[_addStateIdBefore].selected = false;
document.getElementById('addr_state_id').options[_addStateIdAfter].selected = true;
表示の部分の書換え
document.getElementById("state").getElementsByTagName("input").item(0).value = _addStateName;
jsコード
var getAddName = function( $addNum ){
var _zipcloudAPI = document.body.appendChild(document.createElement("script"));
_zipcloudAPI.src = "https://zipcloud.ibsnet.co.jp/api/search?zipcode=" + $addNum + "&callback=getAddNameByZipcloudAPI";
document.body.removeChild(_zipcloudAPI);
};
var getAddNameByZipcloudAPI = function( $getAdd ){
var _stateId = "";
var _addStateId = "";
var _addStateCity = "";
var _addStateName = "";
if($getAdd.status == 200){
_addStateId += $getAdd.results[0].prefcode; // 都道府県ID
_addStateName += $getAdd.results[0].address1; // 都道府県名
_addStateCity += $getAdd.results[0].address2; // 市町村名
_addStateTown += $getAdd.results[0].address3; // 町域名
}
var _stateId = document.getElementById("addr_state_id").value;
document.getElementById("state").getElementsByTagName("input").item(0).value = _addStateName;
document.getElementById('addr_state_id').options[_stateId].selected = false;
document.getElementById('addr_state_id').options[_addStateId].selected = true;
document.getElementById("addr_city").value = _addStateCity;
};
ZipcloudAPI 取得URLはhttpsで取得するように
http://zipcloud.ibsnet.co.jp/api/search?zipcode=
上記で開発環境では問題なく取得できたが、本番でブロックされてしまったので、下記に書き直して問題なく取得
https://zipcloud.ibsnet.co.jp/api/search?zipcode=
