selectで選択した項目を同じページに表示させたいのですが、optionの一番上の項目しか表示できません。

前提

XAMPPで旅行の予定表を作るサイトを作って学習しています。

optionタグにデータベースから抜き出したデータをforeachで表示させ、
その項目を選択し、同じページに表示させる機能を実装中に下記の問題が発生しました。

実現したいこと

selectで選択した項目を同じページに表示させたい

発生している問題・エラーメッセージ

foreachでデータをselectボックスに表示させるところまではできましたが、
selectボックスの一番上の項目以外を選択して、
input type="button"を押しても、
同じページに表示されるのは、一番上の項目になってしまいます。

エラーメッセージ

該当のソースコード

php
1$travelSchedules = output::getTravelSchedules();
2
3//トラベルタイトルを選択しPOSTされると表示させる
4if(isset($_POST['example'])){
5    $selectTravelTitle = $_POST['example'];   
6}

HTML
1<form action="" method="POST">
2    <select name="example">
3         <?php foreach ($travelSchedules as  $data_val): ?>
4              <option value="<?php echo $data_val['id'] ?>"><?php echo $data_val['travel_title'] ?></option> 
5         <?php endforeach; ?>
6    </select>  
7    <div>
8         <input type="button" class="show" value = "表示する" onclick="showset();">
9    </div>
10</form>
11<p>※下にスクロールすると予定表を確認できます。  
12</div>   
13    <div class="title-container" id="disp">
14         <h1><?php echo $selectTravelTitle ?></h1>
15

試したこと

var_dump($selectTravelTitle)を行ったところ、
input type="button"を押す前にすでにselectの一番上の項目が入っていました。

回答2件

php
1<select name="example">
2    <?php foreach ($travelSchedules as $data_val): ?>
3        <option value="<?php echo $data_val['id'] ?>"
4            <?php if (($selectTravelTitle ?? null) === $data_val['travel_title']): ?>
5                selected="selected"
6            <?php endif; ?>
7        >
8            <?php echo $data_val['travel_title'] ?>
9        </option>
10    <?php endforeach; ?>
11</select>

投稿2022/08/11 15:41

phper.k

総合スコア3923

回答へのコメント

beginner321

2022/08/12 02:22

ご教授頂きありがとうございます。載せて頂いたコードに修正しましたが、下記の部分にWarning: Undefined variable 出ています。 <h1><?php echo $selectTravelTitle ?></h1> 未定義の変数という意味だと思うのですが、 $selectTravelTitleに予めなにか定義しておけば宜しいのでしょうか？また、載せて頂いたコードにつきまして、 $selectTravelTitleがPOSTされる前はNULLとなり、 selectedが効かないようにするというイメージであっていますでしょか？改善策等ございましたらお教え頂けますと幸いです。

phper.k

2022/08/12 04:14

回答のコードにヒントがあるので、その意味を調べてみるといいですね

beginner321

2022/08/12 16:36

回答していただいたコードにつきまして、 selected属性とNULL合体演算子について調べて、複数あるoptionからPOSTされた項目にのみにselected属性がつき、その項目をselectBoxに表示させる為のコードと解釈致しました。今回は下記<h1>部分に選択された項目を表示させたかったのですが、 input type="button"からsubmitに変更すると、上手く行きましたが、次はonclickが効かなくなってしまいましたので、改善策を探します。 <h1><?php echo $selectTravelTitle ?></h1> ご協力頂きありがとうございました。