路線名と駅名のプルダウンを連動させたい

Question

CMSを作っており、路線名と駅名のプルダウンを連動させたいと考えています。
路線を選んだら、その路線の駅名を表示させるようにしたいです。
路線と駅名はそれぞれのデータベースがあり、路線idがそれぞれに入っています。

現在のソースを書かせていただきます。

<select name="line1">
<option value="">-----沿線を選択-----</option>
<?
$recordSet_Li=mysqli_query($conn,"SELECT * FROM line");
while($Li = mysqli_fetch_assoc($recordSet_Li)){
	$LINE_NAME=htmlspecialchars($Li['line_name']);
	$LINE_CD=htmlspecialchars($Li['line_cd']);
?>
<option value="<?=$LINE_CD?>"><?=$LINE_NAME?></option>
<?}?>
</select>



<select id="station1"><option value="">-----駅を選択-----</option></select>
<script>
var array = new Array();
array[''] = new Array({cd:"0", label:"-----駅を選択-----"});
array["11603"] = new Array(
  {cd:"1160301", label:"大阪"},
  {cd:"1160308", label:"甲南山手"},
  {cd:"1160309", label:"摂津本山"},
  {cd:"1160310", label:"住吉"},
  {cd:"1160311", label:"六甲道"}
);
array["34001"] = [
  {cd:"3400101", label:"大阪梅田"},
  {cd:"3400102", label:"中津"},
  {cd:"3400111", label:"岡本"},
  {cd:"3400112", label:"御影"},
  {cd:"3400113", label:"六甲"}
];
document.getElementById('line1').onchange = function(){
  station1 = document.getElementById("station1");
  station1.options.length = 0
  var changedPref = line1.value;
  for (let i = 0; i < array[changedPref].length; i++) {
    var op = document.createElement("option");
    value = array[changedPref][i]
    op.value = value.cd;
    op.text = value.label;
    station1.appendChild(op);
  }
}
	</script>

上記のソースは、一旦試しで書いてみたのですが、
ジャバスクリプトの中で、データベースから引っ張ってきたデータを繰り返す
書き方をご教示いただけないでしょうか。

array["路線コード1"] = [
{cd:"駅コード1", label:"駅名1"},
{cd:"駅コード2", label:"駅名2"},
];
array["路線コード2"] = [
{cd:"駅コード1", label:"駅名1"},
{cd:"駅コード2", label:"駅名2"},
];
というふうに繰り返したいです。
（上記のソースでは、駅のデータベースからデータを取得する記述はまだ書いていません）

Answer 1

選択時のイベントをJavascriptで捕捉
→選択肢をリクエストパラメータとして非同期通信（Ajax,fetch API）
→PHPでリクエストパラメータ受け取って検索結果返却
→返却値を受け取ってoptionを再構成

という形になるかと

Comments

[mikiko.s]

回答いただき、ありがとうございます。質問内容を少し修正させていただきました。ジャバスクリプトやphp初心者のため、ご教示いただけますと幸いです。

[m.ts10806]

CMS使っている、MySQL　なのにDBに情報持たないのはどうしてでしょうか。

[m.ts10806]

私の回答を実現しようとすると「JavaScriptで配列をループして」ということにはならないです。必要な情報だけを非同期通信で取得するので。

[mikiko.s]

データベースに情報はあります。駅名のところをデータベースから引っ張ってきて、ジャバスクリプトで繰り返すという書き方が分からなくて、一旦上記のように書いています。
書いてくださっていた回答がちょっとわからなくて、別のやり方でやろうとしていた次第です。。

[m.ts10806]

全て一気にやろうとするからかと思います。
1つずつやってみてください。動的（変数）になるところは固定値で。

[mikiko.s]

回答ありがとうございます。やり方を変えてみて、うまく行きました。。。

Answer 2

やり方を変えまして、下記のやり方でうまく行きました。
回答いただき、ありがとうございました。

<dl class="CONTACT"> <dt><span>交通1</span></dt> <dd> <select class="parent" name="line1_id" required> <option value="" class="msg" disabled selected>路線を選択</option> <?php $recordSet_City=mysqli_query($conn, 'SELECT * FROM line'); while ($City = mysqli_fetch_assoc($recordSet_City)){ $LINE1_NAME=htmlspecialchars($City['line_name']); $LINE1_CD=htmlspecialchars($City['line_cd']); ?> <option value="<?=$LINE1_CD?>"><?=$LINE1_NAME?></option> <?php }?> </select>

<select class="children" name="station1_id" required>
	<option value="" class="msg" disabled selected>駅を選択</option>
	<?php
	$recordSet_St=mysqli_query($conn, 'SELECT * FROM station');
	while ($St = mysqli_fetch_assoc($recordSet_St)){
		$STATION1_CD=htmlspecialchars($St['station_cd']);
		$STATION1=htmlspecialchars($St['station_name']);
		$STATION1_LINE_CD=htmlspecialchars($St['line_cd']);
	?>
	<option value="<?=$STATION1_CD?>"data-val="<?=$STATION1_LINE_CD?>"><?=$STATION1?></option>
	<?php }?>
</select>

</dd> </dl> <script>$(function() { var $children = $('.children'); var original = $children.html(); $('.parent').change(function() { var val1 = $(this).val(); $children.html(original).find('option').each(function() { var val2 = $(this).data('val'); if (val1 != val2) { $(this).not('optgroup,.msg').remove(); } }); if ($(this).val() === '') { $children.attr('disabled', 'disabled'); } else { $children.removeAttr('disabled'); } }); }); </script>

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

ただ、JavaScriptでゴチャゴチャやりすぎてるので、やはり選択時に非同期でデータ得て構成したほうがスッキリすると思います。

Answer 3

ますSQLはどうであれ、これが動くでしょうか？

test.php

<?php

$cmd = json_decode (file_get_contents ('php://input'), true);
$type = $cmd['type'];
$value = $cmd['value'];
$rst = [ ];

switch ($cmd['type']) {
  case 'line1':
    $rst = [
      ["-----沿線を選択-----", ""],
      ["ＪＲ神戸線", "11603"],
      ["阪急神戸本線", "34001"]
    ];
    break;
  case 'station1' :
    switch ($value) {
      case "" :
        $rst = [];
        break;
      case "11603" :
        $rst = [
          ["-----駅を選択-----", ""],
          ["大阪","1160301"],
          ["甲南山手","1160308"],
          ["摂津本山","1160309"],
          ["住吉", "1160310"],
          ["六甲道","1160311"]
        ];
        break;
      case "34001" :
        $rst = [
          ["-----駅を選択-----", ""],
          ["大阪梅田", "3400101"],
          ["中津", "3400102"],
          ["岡本", "3400111"],
          ["御影", "3400112"],
          ["六甲", "3400113"]
        ];
        break;
    }
    break;
}


header ('Content-type: application/json; charset=utf-8');
header ('X-Content-Type-Options: nosniff');
echo json_encode ($rst);
?>

<!DOCTYPE hrml>
<meta charset="UTF-8">
<title></title>
<style></style>

<body>

<select name="line1"></select>
<select name="station1"></select>


<script>
const replaceSelect=(a,b=[])=>a.replaceChildren(...b.map(c=>new Option(...c)));


async function ajax (path, args = { }) {
  let res = await fetch (path, { method: 'post', body: JSON.stringify (args) });
  return JSON.parse (await res.text ());
}


async function loading (select, arg = {}) {
  let data = await ajax ("test.php", arg);
  replaceSelect (select, data);
}


function changeHandler () {
  let value = s0.value;
  loading (s1, {type: "station1", value});
}

//----------

let [s0, s1] = document.querySelectorAll ('select');
s0.addEventListener ('change', changeHandler, false);
loading (s0, {type: "line1"});

</script>

Comments

[mikiko.s]

回答ありがとうございました。検証していないのですが、やり方を変えてうまくいきました。