根据仅使用 1 个表的另一个选择框从数据库查询中填充选择框答案

【问题标题】：Populate select box from database query based on another select box using only 1 table根据仅使用 1 个表的另一个选择框从数据库查询中填充选择框
【发布时间】：2016-10-26 14:41:54
【问题描述】：

大家好，我目前正在创建一个主要功能是预订汽车的网站。因此，用户首先能够从数据库查询中选择一个汽车类别，该查询将输出所选汽车类别名称。选择汽车类别名称后，第二个选择框将动态更新一组与该类别相关联的新汽车名称。

可能有很多类似的问题，但是对于网站 NO 可以使用 jQuery 或 AJAX。其他问题和示例通常使用 2 个或更多表，但我仅使用 1 个表来实现此功能。

下面的示例应该显示应该如何更新选择框： Dynamically updated select box.

使用的表格是这样的： Table Utilized

我的代码是这样的：

<?php
  session_start();
include "dbconn.php";


  $query = "SELECT carid, brand FROM cars";
  $result = $dbcnx->query($query);

  while($row = $result->fetch_assoc()){
    $subcats[] = array("id" => $row['carid'], "val" => $row['brand']);
  }


  $jsonSubCats = json_encode($subcats);


?>

<!docytpe html>
<html>

  <head>
    <script type='text/javascript'>
      <?php

        echo "var subcats = $jsonSubCats; \n";
      ?>
      function loadCategories(){
        var select = document.getElementById("categoriesSelect");
        select.onchange = updateSubCats;
      }
      function updateSubCats(){
        var catSelect = this;
        var catid = this.value;
        var subcatSelect = document.getElementById("subcatsSelect");
        subcatSelect.options.length = 0; //delete all options if any present
        for(var i = 0; i < subcats[catid].length; i++){
          subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id);
        }
      }
    </script>

  </head>

  <body onload='loadCategories()'>
            Car Category:<br />
        <select size="1" name="categoriesSelect" id="categoriesSelect">
           <option> Select Car Category  </option>
           <option value="sedan"> Sedan  </option>
           <option value="mpv"> MPV  </option>
           <option value="hatch"> Hatchback </option>
        </select><br /><br />

      Car Brand:<br />
    <select id='subcatsSelect'>
    </select>
  </body>
</html>

我可能已经确定了 php 语句的错误：

  while($row = $result->fetch_assoc()){
$subcats[] = array("id" => $row['carid'], "val" => $row['brand']);

因为我只能看到第一个选择框查询正确包含 MPV、轿车和掀背车这 3 个汽车类别。

目前显示所有汽车品牌名称，但结果与数据库中显示的汽车类别不对应。

谢谢。

【问题讨论】：

标签： javascript php html mysql drop-down-menu

【解决方案1】：

由于 PHP 中的两个数组在创建时都遵循相同的模式，因此 json 数据也将相似，因此遍历数据的方法应遵循 loadCategories 函数中的方法 - 所以也许是这样：

  function updateSubCats(){
    var oSelect = document.getElementById("subcatsSelect");
    oSelect.options.length = 0;

    for( var i in subcats ){
        oSelect.options[ i ]=new Option( subcats[ i ].val, subcats[ i ].id );
    }
  }

不使用 Ajax 或使用复杂的 json 迭代使事情变得过于复杂，您可以尝试这些方法。应该注意的是，将 $_GET 变量直接嵌入到 sql 中并不是最好的选择 - 准备好的语句会更好，但应该给出想法。

<?php
    session_start();
    include "dbconn.php";
?>

<!docytpe html>
<html>
  <head>
    <title>Chained select</title>
    <script type='text/javascript'>

        function bindEvents(){
            document.getElementById('categories').addEventListener( 'change', getSubcategories, false );
        }

        function getSubcategories(e){
            var el=e.target ? e.target : e.srcElement;
            var value=el.options[ el.options.selectedIndex ].value;
            location.search='?category='+value;
        }

        document.addEventListener( 'DOMContentLoaded', bindEvents, false );
    </script>
  </head>

  <body>
    <form>
        <select id='categories'>
        <?php

            $query = "SELECT carcat FROM cars";
            $result = $dbcnx->query($query);

            while( $row = $result->fetch_assoc() ){
                echo "<option value='{$cat['carcat']}'>{$cat['carcat']}";
            }

        ?>
        </select>
        <select id='subcategories'>
            <?php

                if( !empty( $_GET['category'] ) ){

                    $sql = "SELECT carid, brand FROM cars where carcat='{$_GET['category']}';";
                    $result = $dbcnx->query( $sql );

                    if( $result ){
                        while( $row = $result->fetch_assoc() ){
                            echo "<option value='{$row['carid']}'>{$row['brand']}";
                        }
                    }
                }

            ?>
        </select>
    </form>
  </body>
</html>

【讨论】：

我只是更新了我的代码，使汽车类别选择框只包含 3 个静态值。您提供的代码仍然不会动态更改汽车品牌选择框。谢谢。
是的，我刚刚添加了 ID，但问题仍然存在。现在“品牌”选择框可以正常工作，但所有品牌名称都会出现。品牌名称应与数据库中显示的汽车类别相对应地出现。我不知道现在问题集中在哪里。谢谢。
嗨 Ram 感谢您创建代码。但是，选项的回声值似乎有问题。正如您在上面提到的 GET_ 值会产生问题，它似乎无法正确显示结果。但我确实明白你直接插入值的想法。谢谢。

【解决方案2】：

当然不会，你访问你的数组是错误的：

subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id);
                                     ^^^^^                         ^^^^^

您的 subcats 数组只有 2 维，但您在此处将其作为 3 维数组访问。

【讨论】：

对不起，我不太明白你的意思。你能告诉我正确的数组吗？或许我看了就明白了。谢谢。
你的 subcats 数组基本上是$foo = array(array('id' => 42))。一个数组在另一个数组中。但是您的 js 将其视为 array(array(array(id=>42)) 该数组上没有 catid 维度。
抱歉，我刚刚更新了代码以允许第一个选择框只有静态值。我知道这会大大改变对第二个汽车品牌的查询。我寻求您的耐心，因为我对杰森价值观很陌生。谢谢。
与“json 值”无关。但你不能只以一种方式构建数据结构，然后在其他地方以完全不同的方式使用它。
您有什么建议可以在不使用任何 jquery 或 ajax 方法的情况下填充第二个选择框？谢谢。