僅使用1個表基於另一個選擇框填充數據庫查詢中的選擇框

Question

大家好，我目前正在創建一個網站，主要功能是預訂汽車。 因此，用戶將首先能夠從數據庫查詢中選擇汽車類別，該查詢將輸出選定的汽車類別名稱。 在選擇了汽車類別名稱之后，第二選擇框隨后將通過與該類別相關聯的一組新的汽車名稱進行動態更新。

也許有這許多類似的問題然而，對於該網站可以利用NO的jQuery或AJAX。 和其他問題和示例通常使用2個或更多表，但是此功能我僅使用1個表。

下面的示例應顯示如何更新選擇框：動態更新的選擇框。

使用的表是這樣的：使用的表

我的代碼是這樣的：

 <?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個汽車類別組成。

當前會顯示所有“汽車品牌”名稱，但是結果與數據庫中顯示的汽車類別不符。

謝謝。

Answer 1

當然不會，您正在錯誤地訪問數組：

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

您的subcats數組只有二維的，但是您在這里以3維數組的形式對其進行訪問。

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 個解決方案

解決方案1
0 2016-10-26 14:48:17

解決方案2
0 已采納 2016-10-26 14:59:56

僅使用1個表基於另一個選擇框填充數據庫查詢中的選擇框

問題描述

2 個解決方案

解決方案1 0 2016-10-26 14:48:17

解決方案2 0 已采納 2016-10-26 14:59:56

解決方案1
0 2016-10-26 14:48:17

解決方案2
0 已采納 2016-10-26 14:59:56