JavaScriptのchangeイベントにサーバー側で用意した配列を使いたい

ドロップダウンの選択値が変わるたびに、選択値に応じて表示値が切り替わるイベントを実装したいです。
ドロップダウンの選択値、表示候補は、SQLで取得した配列を使いたいのですが、JavaScript側でどう実装してよいかがわかりません。
画面には、クラスと給料とグレードが有り、グレードのみドロップボックスとします。ドロップボックスが変更されるたびに、+変更されたグレードと画面に表示されているクラスに紐づく給料が表示されるイメージです。

  //サーバー側
  $list = $this->GetList();
  //選択用ドロップボックス
  $htmlData['Grade'] = form_dropdown("Grade", $list ,'','')
  $htmlData['Class'] = $db->class;																		
  $htmlData['Salary'] = $dbRow->salary;	

  public function GetList()
  {
    sql = 'SELECT grade,class,salary FROM table ORDER BY grade'; 
    $result = $this->db->query($sql);
    return $result->result_array();    
  }

  //画面情報
  <tr><th class="test">グレード</th><td><?= $Grade?></td></tr>
  <tr><th class="test">クラス</th><td><?= $Class?></td></tr>
  <tr><th class="test">給料</th><td><?= $Salary ?></td></tr>

js
1  $(function(){
2    //画面のグレードに変更があった場合
3    $('select[name="Grade"]').on('change', function(){
4　　var grade=0 ;
5　　var salary = 0;
6
7　　grade = $('select[name="grade"] option:selected').val();
8
9　　//※1画面のClassの値と変更されたGradeからsalaryの値を取得したい
10
11　　salary = ※1で取得した値;

class	grade	salary
A	1	1000
A	2	1500
A	3	2000
B	1	500
B	2	1000
B	3	1500

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

回答2件

ローカル環境をmampで作成。試したところ上手く動きました。

$dbh = new PDO("mysql:host=localhost:3306;dbname=test2; charset=utf8", 'root', 'root');

ここは環境によって値が変わります。

HTML + php + Javascript

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        span,
        select {
            display: inline-block;
            margin-right: 30px;
        }
    </style>
</head>

<body>
    <?php
    try {
        // DBへ接続
        $dbh = new PDO("mysql:host=localhost:3306;dbname=test2; charset=utf8", 'root', 'root');

        // classがAのgradeを取得するSQL文
        $sqlA = "SELECT grade FROM test2 WHERE class = 'A'";

        // classがAのsalaryを取得するSQL文
        $sqlA_Salary = "SELECT salary FROM test2 WHERE class = 'A'";

        // classがBのgradeを取得するSQL文
        $sqlB = "SELECT grade FROM test2 WHERE class = 'B'";

        // classがBのsalaryを取得するSQL文
        $sqlB_Salary = "SELECT salary FROM test2 WHERE class = 'B'";

        // SQL実行
        $resA = $dbh->query($sqlA);
        $resB = $dbh->query($sqlB);
        $sqlA_Salary = $dbh->query($sqlA_Salary);
        $sqlB_Salary = $dbh->query($sqlB_Salary);

        // 取得したデータを連想配列として出力
        $aryListA = $resA->fetchAll(PDO::FETCH_ASSOC);
        $aryListB = $resB->fetchAll(PDO::FETCH_ASSOC);
        $aryListA_Salary = $sqlA_Salary->fetchAll(PDO::FETCH_ASSOC);
        $aryListB_Salary = $sqlB_Salary->fetchAll(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        echo $e->getMessage();
        die();
    }

    // 取得したデータをJavascriptで使える配列として出力
    $jsonArr_A = array_column($aryListA, "grade");
    $jsonArr_B = array_column($aryListB, "grade");
    $jsonArr_A_Salary = array_column($aryListA_Salary, "salary");
    $jsonArr_B_Salary = array_column($aryListB_Salary, "salary");

    // 接続を閉じる
    $dbh = null;
    ?>
    <form>
        <div>
            <span>クラスA</span>
            <label for="gradeA">グレード</label>
            <select name="grade" id="gradeA">
                <?php
                for ($i = 0; $i < count($jsonArr_A); $i++) {
                    echo "<option value='$i'>$jsonArr_A[$i]</option>";
                }
                ?>
            </select>
            <span>給料</span><span class="salary">1000</span>
        </div>
        <div>
            <span>クラスB</span>
            <label for="gradeB">グレード</label>
            <select name="gradeB" id="gradeB">
                <?php
                for ($i = 0; $i < count($jsonArr_B); $i++) {
                    echo "<option value='$i'>$jsonArr_B[$i]</option>";
                }
                ?>
            </select>
            <span>給料</span><span class="salary">500</span>
        </div>
    </form>
    <script>
        const gradeA = document.getElementById("gradeA");
        const gradeB = document.getElementById("gradeB");

        const select = (elm, arr) => {
            const option = elm.getElementsByTagName("option");
            elm.addEventListener("change", (e) => {
                const targetValue = e.target.value;
                elm.nextElementSibling.nextElementSibling.innerText = arr[targetValue];
            });
        }

        select(gradeA, <?php echo json_encode($jsonArr_A_Salary); ?>);
        select(gradeB, <?php echo json_encode($jsonArr_B_Salary); ?>);
    </script>
</body>

</html>

投稿2021/05/09 09:01