0

我在这里阅读了多个主题,但仍然无法为我的问题找到一个好的答案,所以对于这个愚蠢的问题,我很抱歉,但对于我对 Javascript 的糟糕程度,我无话可说。

所以我目前正在尝试根据第一个选择的选项更改第二个选择标签上的选择选项。

<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 的准备好的语句,这只是第一次测试)

4

1 回答 1

-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>

这应该生成一个数组,其中包含每个主要类别的索引,内容是各自的子类别。

示例输出:

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

现在,您只需要在“类别”选择触发 onchange 事件时替换“子”选择的 innerHTML。

于 2019-09-30T10:07:29.170 回答