Question

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

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

以下示例应显示如何更新“选择”框： Dynamically updated select box.

使用的表是这样的： Table Utilized

我的代码是这样的：

＆＃13;

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

＆＃13;

我可能已经将错误识别为php语句：

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

因为我只能看到正确的第一个选择框查询包含3种车型MPV，轿车和两厢车。

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

谢谢。

Answer 1

当然，它不会，你错误地访问你的阵列：

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

您的子片段数组只是二维的，但您可以在此处将其作为三维数组进行访问。

Answer 2

由于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迭代使事情变得复杂，你可以尝试这些方法。应该注意的是，直接在sql中嵌入$ _GET变量并不是最好的选择 - 准备好的语句会更好但是应该给出这个想法。

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

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

2 个答案: