【HTML実践】複数のプルダウンが連動するやつ Part1
今回の記事はかなりエンジニア向けになっております。次回以降の記事で、初心者向けに各ソースの解説をした記事を投稿しますので、わからなかった方は少々お待ちください。
親プルダウンと子プルダウン
皆さんも、親プルダウンが選択されると、子プルダウンの選択肢が変化するようなフォームを見たことがあると思います。具体例でだと親プルダウンに「地方」、子プルダウンに「都道府県」などがそれにあたると思います。以下のページの地域選択フォームがそれにあたります。
www.manpowerjobnet.com
下記の仕様概要にあるようなフォームをつくる為にはどうしたらよいか、ちょっと作り方を調べてみました。よく見かけるフォームなので、すぐ見つかるかと思ったのですが、割と苦労しました。
サーバ側の処理
こういった類のものでまず判断するべきは、サーバ処理が入るかどうかだと思います。選択肢が都道府県くらいの数であれば、画面ロード時にすべて取得してしまい、JSだけで切替処理をするのもアリだと思います。
ですが、割とそういった方法を採用せずに、選択された地域の値を一旦サーバ側に渡して、地域に紐づく都道府県の一覧を取得後、フロントエンドに反映する方式を紹介している解説サイトが多かった印象です。
確かに、地域と都道府県の紐づきをDBに持たせてしまえば、異動や組織改編などで情報が変わった時、スクリプトの改修が必要ないのでお客様に説明しやすいのかもしれませんね。
非同期処理
サーバ側の処理があるということは、何らかの形で処理をサーバ側に持っていく必要があるということです。今回はajaxを使って非同期処理でサーバ側に処理を投げてしまいましょう。
ちなみに、何でもかんでも非同期処理に回してしまうと、後で処理の整合性を取るのが難しくなり、後悔することもあるので気を付けましょう。
仕様概要
プルダウンが3つ存在する
- プルダウン①
- プルダウン②
- プルダウン③
プルダウンはそれぞれ親子関係にある
- プルダウン①の子がプルダウン②
- プルダウン②の子がプルダウン③
親の値が変更されると子が以下のように状態変化する
- 子の値が初期化
- 親の値が初期値の場合、子は選択不可
各プルダウンの値はDBから取得する
- プルダウン①：地域（東北とか関東とか）
- プルダウン②：都道府県（青森とか東京とか）
- プルダウン③：店舗（青森支店とか東京支店とか）
コーディング
フロントエンド
HTMLは下記の通りです。関係ないクラスは極力減らしましたが、一部bootstrapのクラスが残っています。
<div class="form-group row"> <label> 登録店舗<span class="attention">*</span>:</label> <div class="col-sm-3"> <select id="area_cd_1" name="area_cd_1"> <option value="-1">エリアを選択</option> <?= $mcode->getSelecterList('area_cd_1', $app->preSetValues); ?> </select> </div> <div class="col-sm-3"> <select id="area_cd_2" name="area_cd_2" <?= vSelectionDisabled('area_cd_1', $app->preSetValues); ?>> <option value="-1">エリアを絞込み</option> <?= $areaLink->getValue($app->preSetValues); ?> </select> </div> <div class="col-sm-3"> <select id="area_cd_3" name="area_cd_3" <?= vSelectionDisabled('area_cd_2', $app->preSetValues); ?>> <option value="-1">店舗名</option> <?= $shop->getShopInArea2($app->preSetValues); ?> </select> </div> </div>
getSelecterList、getValue、getShopInArea2は初期値と初期選択肢をセットするためのメソッドです。本件の本質とは異なりますので内容は割愛します。
またCSSに関しても、本件の仕様を満たすために必須な記述はないので省きます。
JSは下記のとおりです。jQueryとajaxを利用しています。
//エリアの入力フォーム制御（プルダウン） $(function () { //エリア1が変更された場合、それに紐づく都道府県プルダウンの選択肢を変更する $('#area_cd_1').on('change', function () { var area_cd_1_val = $(this).val(); $.post('../_area_cd_1_updated_ajax.php', { mode: 'area_cd_1', area_cd_1: area_cd_1_val }, function (data) { //selectタグ（子） の option値 を一旦削除 $('#area_cd_2 option').remove(); //_area_cd_1_updated_ajax.php から戻って来た data の値をそれそれ optionタグ として生成し、 // #area_cd_2 に optionタグ を追加する $('#area_cd_2').append($('<option>').text('エリアを絞込み').attr('value', -1)); if (data.length == 0) { $('#area_cd_2').prop('disabled', true); } else { $('#area_cd_2').prop('disabled', false); } for (var area in data) { $('#area_cd_2').append($('<option>').text(data[area]['area_val_2']).attr('value', data[area]['area_cd_2'])); } $('#area_cd_2').trigger('change'); }); }); //エリア2（都道府県）が変更された場合、それに紐づく店舗プルダウンの選択肢を変更する $('#area_cd_2').on('change', function () { if($('#area_cd_3').length) { var area_cd_2_val = $('#area_cd_2').val(); $.post('../_area_cd_2_updated_ajax.php', { mode: 'area_cd_2', area_cd_2: area_cd_2_val }, function (data) { //selectタグ（子） の option値 を一旦削除 $('#area_cd_3 option').remove(); //_area_cd_2_updated_ajax.php から戻って来た data の値をそれそれ optionタグ として生成し、 // #area_cd_3 に optionタグ を追加する $('#area_cd_3').append($('<option>').text('店舗名').attr('value', -1)); if (data.length == 0) { $('#area_cd_3').prop('disabled', true); } else { $('#area_cd_3').prop('disabled', false); } for (var area in data) { $('#area_cd_3').append($('<option>').text(data[area]['shop_name']).attr('value', data[area]['id'])); } }); } }); });
バックエンド
バックエンド側の処理は渡された親の値を元に子の選択肢を生成ところがメインになります。
_area_cd_1_updated_ajax.php
<?php //直接のページ遷移を阻止 $request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : ''; if($request !== 'xmlhttprequest') exit; if ($_SERVER['REQUEST_METHOD'] === 'POST') { try { $res = _area_cd_1(); header('Content-Type: application/json'); echo json_encode($res); exit; } catch (Exception $e) { header($_SERVER['SERVER_PROTOCOL'] . ' サーバ内処理エラーが発生しました。（500）', true, 500); echo $e->getMessage(); exit; } } /** * 指定したエリアコード1に紐づくエリアコード2の情報を配列で返す * @return array: 指定したエリアコード1に紐づくエリアコード2の情報 * @throws \Exception :エリアコード1の情報が存在しなかった場合に発生する */ function _area_cd_1() { if (!isset($_POST['area_cd_1'])) { throw new \Exception('エリアコード1の情報がセットされていません。'); } $areaLinks = new \MyApp\Model\AreaLink(); return $areaLinks->getAjaxValue($_POST['area_cd_1']); }
_area_cd_2_updated_ajax.php
<?php //直接のページ遷移を阻止 $request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : ''; if($request !== 'xmlhttprequest') exit; if ($_SERVER['REQUEST_METHOD'] === 'POST') { try { $res = _area_cd_2(); header('Content-Type: application/json'); echo json_encode($res); exit; } catch (Exception $e) { header($_SERVER['SERVER_PROTOCOL'] . ' サーバ内処理エラーが発生しました。（500）', true, 500); echo $e->getMessage(); exit; } } /** * 指定したエリアコード2に紐づく店舗情報を配列で返す * @return array: 指定したエリアコード2に紐づく店舗の情報 * @throws \Exception :エリアコード2の情報が存在しなかった場合に発生する */ function _area_cd_2(){ if (!isset($_POST['area_cd_2'])) { throw new \Exception('エリアコード2の情報がセットされていません。'); } $shops = new \MyApp\Model\Shop(); return $shops->getAjaxShopInArea2($_POST['area_cd_2']); }
getAjaxValueや、getAjaxShopInArea2はここでは定義しておりませんが、基本的にDBからHTML形式で値を生成するメソッドです。本件の本質とは異なりますので、割愛します。
ソースを貼ったら文字数がとんでもないことになってしまったので、それぞれの解説は以降の記事で実施しようと思います。
まとめ
プルダウンの選択肢が多すぎたとしても、致命的な問題になるわけではありませんが、やはりUIにこだわるのであれば、選択肢の数はスクロールバーが表示されない程度に抑えたいものですね。
何より、お客様からこの形式のプルダウンをご要望頂くことが多いので、覚えておいて損はないと思います。
今回はこのソースを見て足りないところを補完できるエンジニアに向けて、先に全体像をお伝えいたしました。次回以降の記事で、初心者の方にもわかるようにソースを解説していきたいと思います。
ではでは
