根據 PHP 變量使用 javascript 更改 select 選項

Question

我在這里閱讀了多個主題，但仍然無法為我的問題找到一個好的答案，所以我很抱歉這個愚蠢的問題，但對於我對 Javascript 的糟糕程度，我無話可說。

所以我目前正在嘗試根據第一個選項中的選定選項更改第二個 select 標記上的 select 選項。

<select name="category" id="category">
    <option value="" disabled selected value>Cat1</option>
                <?php 
  $stmt = $conn->query("SELECT * FROM cats");
  while($row = $stmt->fetch()) {
    echo "<option value='".$row['name']."'>".$row['text']."</option>";
  }
  ?>
</select>
    </div>
</div>

  <div class="div3">
<div class="div4">
  <label for="test">cat2</label>
</div>
<div class="div7">
 <select name="sub" id="sub">
 <?php 
  $stmt = $conn->query("SELECT * FROM cats WHERE name = $cat");
  while($row = $stmt->fetch()) {
    echo "<option value='".$row['subname']."'>".$row['subtext']."</option>";
  }
  ?>
 </select>
</div>

所以我知道我需要以某種方式使用“onchange”調用 JavaScript，這將獲取 $cat 變量，然后從 SQL 表中傳回信息。 但我完全不知道我該怎么做。我不想使用任何一種形式或 Ajax。 如果純 Javascript 可以做到這一點，我會很高興..

那么當然我不希望你為我解決整個問題，但如果有人能指出我正確的方向，我會很高興（不要過多考慮 $stmt 的准備好的語句，這只是第一次測試）

Answer 1

如果不想使用 Ajax，則需要獲取每個主要類別的所有數據，並將它們全部保存到拼湊在一起的 JS 數組中。

就像是

  $jstext = ''; //our pieced-together array definition for JS
  $stmt = $conn->query("SELECT * FROM cats");
  while($row = $stmt->fetch()) {
    echo "<option value='".$row['name']."'>".$row['text']."</option>";

    $stmt2 = $conn->query("SELECT * FROM cats WHERE name = {$row['name']}");
    $jstext .= "subcategories['".$row['name']."'] = '";
    $tmp = '';
    while($row2 = $stmt2->fetch()) {
      $tmp .= '<option>'.$row2['name'].'</option>'; //generate html for each subcategory
    }
  }
  $jstext .= $tmp."';\r\n"; //add subcategories to array index, add line break

然后在你的<script>標簽中，添加：

<script>
var subcategories;
<?php echo $jstext ?>
</script>

這應該生成一個數組，其中包含每個主要類別的索引，內容是各自的子類別。

示例 Output：

<script>
var subcategories;
subcategories['maincat1'] = '<option>subcat1</option><option>subcat3</option>';
subcategories['maincat2'] = '<option>subcat4</option><option>subcat6</option>';
</script>

現在，當“類別” select 觸發 onchange 事件時，您只需要替換“子” select 的 innerHTML。