PHPでプルダウンメニューを作ろう!簡単解説で速攻理解

PHPでブラウザに表示する画面を作成している時にこの項目をプルダウンにしたいという事がありませんか?

でもたまにしか使わないからすぐに忘れてしまうというお悩みもあるかもしれません。

本日は、プルダウンメニューを作成する方法について以下の内容でお話します。

【基本】プルダウンについて
【実践】プルダウンを作成
【応用】データベースを使ってプルダウンを作成

わかりやすく解説しますので是非読んでください。

目次

プルダウンとは

作成前に、プルダウンの仕組みを解説します。

根本の理解が深まると記憶への定着もよいと思います。

プルダウン表示の仕組み

まずは画面にメニューを表示させてみましょう。

ブラウザの画面に要素を表示させるためにはHTMLタグを使用します。

HTMLタグには様々な種類があります。

HTMLタグについて詳しく知りたい場合は以下を参考にしてください。

https://www.sejuku.net/blog/category/design/html

プルダウンは<select></select>タグと<option></option>タグとで作成します。

それでは、以下のサンプルコードをご覧ください。

<select name='age'>
<option value='young'>10代~20代</option>
<option value='middle'>30代~50代</option>
<option value='senior'>60代以上</option>
</select>

結果は以下の表示になりました。

※画像は矢印をクリックして選択できる状態の画像です。

画面の表示方法はお分かりいただけたと思います。

では、このプルダウンの選択情報をPHPに送信するにはどのようにしたらよいでしょうか。

次章でその説明をします。

送信の仕組み

それでは、プルダウンで選択した値をPHPに渡す方法です。

使用するのは<form></form>タグとinputタグです。

前章で使用したコードに<form></form>タグを追記しました。

<form method='POST' action='/test'>
<select name='age'>
<option value='young'>10代~20代</option>
<option value='middle'>30代~50代</option>
<option value='senior'>60代以上</option>
</select>
<input type='submit' value='送信' />
</form>

<form></form>タグで囲まれている情報を、【/test】にPOST通信をするという内容です。

【action=’/test’】のtestは、PHPの呼び出せる関数等のパスを設定します。

【method=’POST’】というのは、HTTPの通信方式です。

以下で詳しく説明されているのでよくわからない方は参考にしてください。

そして、プルダウンを選択した後に

<input type='submit' value='送信' />

で表示させているボタンをクリックすると【/test】に情報が送られます。

プルダウンを作成

それでは、実際にプルダウンを作成しましょう。

基本的なサンプルは前章で説明しましたので、ここでは配列からプルダウンデータを作成します。

<?php
// ①配列にデータを設定
$age_data = ['young'=>'10代~20代',
             'middle'=>'30代~50代',
             'senior'=>'60代以上'
            ];
// ②配列のデータをoptionタグに整形
foreach($age_data as $age_data_key => $age_data_val){
    $age_data .= "<option value='". $age_data_key;
    $age_data .= "'>". $age_data_val. "</option>";
}

?>
<form method='POST' action='/test.php'>
<select name='age'>
<?php // ③optionタグを出力
echo $age_data; ?>
</select>
<input type='submit' value='送信' />
</form>

①で配列にoptionタグに設定したい値を設定します。

②でoptionタグに合わせて加工して変数に入れます。

③で、②で加工した内容を出力させます。

結果は、以下のように表示されました。

プルダウンでデータベースを使う方法

最後にデータベースから取得した値をプルダウンに設定する方法です。

ただし、コードは前章の配列からプルダウンデータを作成するとほぼ同じです。

違う事は以下のようなSQL文を発行して

$sql = 'select * from t_age';

その結果を配列に設定する事です。

サンプルコードをみていきましょう。

<?php
// ①DB接続しSQLを発行してデータを取得
$new_mysqli = new mysqli('localhost', 'root', 'パスワード', 'データベース名');

$sql = 'select * from t_age';

if ($age_data = $new_mysqli->query($sql)) {

// ②テーブルのデータをoptionタグに整形
foreach($age_data as $age_data_val){
    $age_data .= "<option value='". $age_data_val['age_val'];
    $age_data .= "'>". $age_data_val['age_data']. "</option>";
}
}

?>
<form method='POST' action='/test.php'>
<select name='age'>
<?php
echo $age_data; ?>
</select>
<input type='submit' value='送信' />
</form>

このようにデータベースの情報をプルダウンに設定する事ができます。

まとめ

本日はPHPでプルダウンを作成する方法についてお話しました。

よく使う方法ですので、この機会に是非覚えておいてくださいね。

それでは、また。

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次