はじめに
会員登録フォーム等において、登録者の住所を都道府県と市区町村のフォームに分けて選択させる機会は多いと思います。
ここで悩みどころなのが、都道府県に応じた市区町村リストをどうやって設定するかです。
都道府県を選択したらページを移動して市区町村選択へ・・・という形であればPHPだけで可能ですが、同一ページで実現するには都道府県選択とともに動的に市区町村データを反映する必要があります。
よく使う割にこの実装はなかなか厄介です。
そこで今回は、都道府県選択とともにフォームに市区町村リストを動的に反映するためのAjaxを使った実装方法について紹介したいと思います。
実装方法
データベース構成
- ・id（市区町村ID）
- ・pref_id（都道府県ID）
- ・name（市区町村名）
まず、今回はデータベースに登録された市区町村情報から一覧を取得することを前提とするために上記のテーブルを用意することとします。
HTML部
<select id="pref" name="pref">
<option value="" selected="selected">都道府県名</option>
<option value="1">北海道</option>
<option value="2">青森県</option>
<option value="3">岩手県</option>
<option value="4">宮城県</option>
<option value="5">秋田県</option>
・
・
・
<option value="47">沖縄県</option>
</select>
<select id="city" name="city">
<option value="" selected="selected">市区町村名</option>
</select>
HTMLの該当するフォームの記述サンプルです。都道府県のセレクトボックスを選択した時点で、その都道府県の市区町村リストを取得しその下の市区町村名のセレクトボックスに反映するようにします。
わかりやすいように今回都道府県情報を直接入れていますが、本来は都道府県情報もデータベースに入れるものと思いますので、その際はデータベースから取得した情報をPHPでループして設定するようにするとよいでしょう。
JQuery部
$(function() {
$('#pref').on("change",function(){
$("#city").empty();
$("#city").append('<option value="" selected="selected">市区町村名</option>');
optval = $(this).val();
$.post({
url: './ajaxs/get_city_list.php',
data:{
'opt': optval
},
dataType: 'json',
}).done(function(datas){
var i = 0;
$.each(datas,function(key,item){
$("#city").append('<option value="'+item.id+'">'+item.name+'</option>');
i++;
})
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
})
})
});都道府県のセレクトボックスが選択されたのを検知して関数が起動、都道府県の値を取得しajaxでphpに都道府県IDを渡し、該当する市区町村データを配列で取得し、市区町村のセレクトボックスに要素として追加します。
繰り返し市区町村を反映すると前に取得したリストの後からリストを追加してしまうため、都道府県選択後、新しいリストを設置する前に市区町村リストを一旦すべてクリアする処理を入れています。
PHP（get_city_list.php）
<?php
header("Content-Type: application/json; charset=UTF-8");
$ary_sel_obj = [];
$opt = filter_input(INPUT_POST,"opt");
$ary_sel_obj = get_city($opt);
echo json_encode($ary_sel_obj);
exit;
?>JQueryから渡された都道府県IDであるoptを受け取って、それをもとにデータベースから該当する市区町村リストを抽出します。
この際の取得関数を「get_city()」としていますが、ここは設定する関数名に応じて変更してください。
最後にJSONを使ってJQueryにデータを配列として渡します。
取得関数の詳細は省きますが、市区町村テーブルのid、nameのふたつを取得する前提で記述しています。
おまけ
おまけで都道府県と市区町村のSQLデータファイルを掲載しておきます。ダウンロードして自由にお使いください。
※取得した時期がだいぶ前のため市区町村名の変更や統合などで情報が変わっている可能性があります。