Ajaxでセレクトメニューの内容を非同期で変更する【最短コピペ用jQueryコード】

2019-08-19 614 1531

フォームを扱うページでは非同期通信を使うことで、
使い勝手が向上することがありますので、jqueryのAjaxは重宝します。

いまさらですが、あまりによく使うので、個人的なメモ代わりに
HTML・jQuery・PHPの３点セットを残しておきます＼(^o^)／

デモサンプルとして、都道府県のエリア選択を例にしました。

デモはこちら

HTML

<!----><!----><table>

    <tr>

        <th>地域区分</th>

        <td>

            <select name="area" id="select-area">

                <option value="">--選択--</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>

            </select>

        </td>

    </tr>

    <tr>

        <th>都道府県</th>

        <td>

            <select name="area47" id="select-area47">

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

                <!-- ここにajaxで生成したoptionタグが入ります -->

            </select>

        </td>

    </tr>

</table>

処理の流れは以下です。

地域区分の選択が変更されたら、Ajaxでoptionタグを生成してデータを返します。
都道府県のセレクトメニューをリセットしてから、生成したoptionタグを追加します。

jQuery

//jquery本体 バージョンはなんでもOK

<!----><!----><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!----><!----><script>

//エリアの選択内容が変わった時に起動

$('#select-area').on('change', function(){

    $.ajax({

        url: 'ajax_select_add.php', //データベースを繋げるファイル

        type:"POST",

        data:{

            area: $(this).val(), //選択されたデータ取得

            table: 'area47', //繋げるDBのテーブル名

        }

    }).done(function(html){

        $("#select-area47").append(html);

    }).fail(function(html) {

        alert("error"); //通信失敗時

    });

});

</script>

PHP

<?php

//▼普通にPOSTで受け取れます

$area = $_POST['area'];

$table_name = $_POST['table'];



//DBに繋いで生成する場合の独自コードの一例

$rst = mysql_query("SELECT * FROM `{$table_name}` WHERE `area` = '{$area}'");

while($row = mysql_fetch_assoc($rst)){

    $html .= '<option value="'.$row['id'].'">'.$row['name'].'</option>';

}



//DBに繋がず連想配列で生成する場合の一例

$PREF[1] = array('北海道');

$PREF[2] = array('青森県','岩手県','宮城県','秋田県','山形県','福島県');

$PREF[3] = array('埼玉県','千葉県','東京都','神奈川県');

$PREF[4] = array('茨城県','栃木県','群馬県','山梨県','長野県');

$PREF[5] = array('新潟県','富山県','石川県','福井県');

$PREF[6] = array('岐阜県','静岡県','愛知県','三重県');

$PREF[7] = array('滋賀県','京都府','大阪府','兵庫県','奈良県','和歌山県');

$PREF[8] = array('鳥取県','島根県','岡山県','広島県','山口県');

$PREF[9] = array('徳島県','香川県','愛媛県','高知県');

$PREF[10] = array('福岡県','佐賀県','長崎県','熊本県','大分県','宮崎県','鹿児島県','沖縄県');



foreach($PREF[$area] as $val){

    $html .= '<option value="'.$val.'">'.$val.'</option>';

}



//▼これで返り値を渡す

header('Content-Type: application/json; charset=utf-8');

echo json_encode($html);

?>