スライドショー

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の通信方式です。

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

【PHP入門】POST送信、GET送信する方法
更新日 : 2019年8月7日

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

<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でプルダウンを作成する方法についてお話しました。

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

それでは、また。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

つぶらや

つぶらや

独学PG&SE、東京在住30代女性。
誰でもプログラマーになれるがモットーで、わかりやすい記事を目指しています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説