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

2024年3月1日

つぶらや

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>

[su_spacer size=”20″]

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

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

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

では、このプルダウンの選択情報を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>

[su_spacer size=”20″]

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

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

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

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

【PHP入門】POST送信、GET送信する方法

更新日：2024年3月1日

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

<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>

[su_spacer size=”20″]

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

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

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

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

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

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

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

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

$sql = 'select * from t_age';

[su_spacer size=”20″]

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

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

<?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>

[su_spacer size=”20″]

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