JavascriptとPHPの変数

###やりたいこと
ラジオボタンの選択項目に対応したセレクトボックスに切り替わる。

HTML
1<input type="radio" name="target" value="1">ターゲットA
2<input type="radio" name="target" value="2">ターゲットB
3<input type="radio" name="target" value="3">ターゲットC
4
5<select name="target">
6 <?php foreach($masters as $master) : ?>
7  <option value="<?=$master['id']?>"><?=$master['name']?></option>
8 <?php endforeach; ?>
9</select>

PHP
1// それぞれ、データベースからデータを抽出済みです
2$masterA = master_data_get('tableA');
3$masterB = master_data_get('tableB');
4$masterC = master_data_get('tableC');

Javascriptだけで、例えば

html
1<select name="targetA">
2 <?php foreach($masterA as $master) : ?>
3  <option value="<?=$master['id']?>"><?=$master['name']?></option>
4 <?php endforeach; ?>
5</select>
6<select name="targetB">
7 <?php foreach($masterB as $master) : ?>
8  <option value="<?=$master['id']?>"><?=$master['name']?></option>
9 <?php endforeach; ?>
10</select>
11<select name="targetC">
12 <?php foreach($masterC as $master) : ?>
13  <option value="<?=$master['id']?>"><?=$master['name']?></option>
14 <?php endforeach; ?>
15</select>

ラジオボタンの選択を一旦送ってその結果で$mastersへ代入してってのは問題ないのですが、ラジオボタンを選択するだけで切り替わるのがまずは基本ではあります。

一応やってみたこと

PHP
1fileA.php
2// それぞれ、データベースからデータを抽出済みです
3$masterA = master_data_get('tableA');
4$masterB = master_data_get('tableB');
5$masterC = master_data_get('tableC');
6
7$json_masterA = json_encode($masterA);
8$json_masterB = json_encode($masterB);
9$json_masterC = json_encode($masterC);

HTML
1index.php
2<?php
3 require_once(fileA.php);
4 require_once(fileB.php);
5?>
6<html>
7 <head>
8 </head>
9 <body>
10  <script type="text/javascript">
11   let masterA = JSON.parse('<?=$json_masterA;?>');
12   let masterB = JSON.parse('<?=$json_masterB;?>');
13   let masterC = JSON.parse('<?=$json_masterC;?>');
14    $.ajax({
15      type: "POST",
16      url: "fileB.php",
17      data: {'データ':masterA},
18      dataType: "json",
19      scriptCharset: 'utf-8'
20    });
21  </script>
22 </body>
23</html>

PHP
1fileB.php
2<?php
3$masters = filter_input(INPUT_POST, 'データ');

こういう感じで、サイトを見ながら書いてはみましたが、、、
Javascript側には確かにデータが渡っていました。

ようはリロードせずに一部だけを変化させるという機能を実装したいのですが、、、、

行動規範の内容に同意します

回答2件

javascriptから表示中のwebページに変化を与えたい、ということですね。
いわゆるDOM操作をすることになりますので、
javascriptからDOM操作することに関する情報を収集して習得してください。

DOM操作すれば、例えば
特定のidをつけたdiv要素を特定し（getElementById()）、
dim要素の内側に
select要素を設けて（appentChild()）、
さらのそのselect要素の内側に
option要素を必要な分登録していく、
みたいなことができます。

変化させたい情報を予めjsの配列データとして持っておけば、
クリックのイベントに応じたDOM操作で対応できるかと思いますが、
なにかサーバー上のリアルタイムに変更があるデータと連動する必要がある場合には、
ajax通信などしてサーバーにデータを問い合わせる必要が生じます。

投稿2020/08/22 03:39

編集2020/08/22 03:54

退会済みユーザー

総合スコア0

Fetherion

2020/08/22 03:52

回答ありがとうございます。 Javascriptに関してまだまだ勉強不足な部分があるので、勉強していこうと思います。

行動規範の内容に同意します

ベストアンサー

PHPはサーバー側の処理言語なので基本的にページが開かれたときにしかその処理を実行しません。

ページリロードをさせずにサーバー側の情報からリストを拾ってきて表示するのであれば、
Ajaxを使った非同期処理が必要になります。

処理の順序としては…

サイト側でラジオボタンが押される
Javascriptが動きどのラジオボタンが押されたのかを取得する
Javascript内でAjaxを用いてPHPファイルにデータを送信する
PHP側で受け取ったデータをもとに必要な情報を例えばJSON形式で送り返す
Javascript側で結果を受け取りそのデータを元にセレクトボックスをHTML出力する

このような流れでしょうか。

また、どうしてもPHPでやりたいという話なら別ですが、
Javascriptだけで完結させることも可能です。

その場合ですが、全てのセレクトボックスをあらかじめ用意して、
CSSで display: none; などで見えなくしておき、
ラジオボックスの選択時に必要なセレクトボックスの要素だけを見えるようにさせる。
またはSelectタグの中に追加したいOptionタグをJavascript側から追加するなどです。

これでもサイトの訪問者目線では同じような動きをすると思います。

投稿2020/08/22 03:42

編集2020/08/22 03:44

phiar_poet

総合スコア230

Fetherion

2020/08/22 03:51

回答ありがとうございます。処理の順序を掲示していただきありがとうございます。確かにすべてのセレクトボックスを用意してっていうやり方は一応見様見真似ですが、できています。今回は同じような作りなんだからっていうので、一つ書けばなんとかなればスッキリするかなっていうイメージで質問させていただきました。処理の流れなど見ながらやってみます。ありがとうございました。

行動規範の内容に同意します

あなたの回答