如何從下拉列表中獲取選定的值並在查詢中使用它而不單擊提交？

Question

我正在制作一個圖表，該圖表將根據從下拉列表中選擇的年份顯示其結果。 是否可以從下拉列表中獲取變量並在查詢中使用它而不單擊提交按鈕？ 我試過這段代碼，但沒有成功：

<?php
                    require '../includes/dbheader.php';
                    $query = "SELECT DISTINCT DATE_FORMAT(orderdate, '%Y') AS year
                              FROM prodsoldmonthly 
                            ";
                    $result = mysqli_query($conn, $query);  
                    echo "<select id='selectyear[]' name='selectyear' class='cd-select filter-input'>";
                    echo "<option class='dropdown' value='' selected>Choose Year</option>";
                    while($row = mysqli_fetch_assoc($result)) {
                    echo "<option class='dropdown' value='{$row['year']}'>".htmlspecialchars($row["year"])."</option>";
                    }
                    echo "</select>";

              ?> 
              <script>
              $yearselected = $("#selectyear option:selected").text(); 
              </script>
                  <!-- Products Sold per Category -- YEAR -->
                <?php  
                include('../includes/dbheader.php');
                  $query = "SELECT categoryName, qty, DATE_FORMAT(orderdate, '%Y') AS year
                            FROM prodsoldmonthly WHERE year = '$yearselected'
                            ";
                  $result = mysqli_query($conn, $query);  
                ?>   

                <script type="text/javascript">  
                   google.charts.load('current', {'packages':['corechart']});  
                   google.charts.setOnLoadCallback(drawChart);  
                   function drawChart()  
                   {  
                        var data = google.visualization.arrayToDataTable([  
                            ['categoryName', 'qty'],  
                              <?php  
                                while($row = mysqli_fetch_array($result))  
                                {  
                                echo "['".$row["categoryName"]."', ".$row["qty"]."],";  
                                }  
                                ?>  
                             ]);  
                        var options = {  
                              title: 'Products Sold Per Category by Year',  
                              is3D:true,  
                              pieHole: 0.4  
                             };  
                        var chart = new google.visualization.PieChart(document.getElementById('piechartyear'));  
                        chart.draw(data, options);  
                   }  
               </script> 

Answer 1

您可以使用 AJAX 來啟動帶有年份的請求，而無需提交整個頁面：

function queryProducts(yearselected) {

   var xmlhttp = new XMLHttpRequest();

   xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // this line will be called when the query finishes successfully
         document.getElementById("products").innerHTML = this.responseText;
      }
    };

    // set url with parameter
    xmlhttp.open("GET", "products.php?yearselected=" + selectedyear, true);
    xmlhttp.send();

}

將“onchange”偵聽器添加到您的選擇以在傳遞所選年份時調用該函數：

<select id='selectyear[]' name='selectyear' onchange="queryProducts(this.value)" class='cd-select filter-input'>";

最后，添加一個占位符以顯示查詢結果：

<div id="products"></div>

編輯：

對於 select 語句，將代碼放在另一個頁面中，例如 products.php 並在 AJAX 函數中調用該頁面：

<?php

    // products.php

    include('../includes/dbheader.php');

    // get url parameter
    $yearselected = intval($_GET['yearselected']);

    $query = "SELECT categoryName, qty, DATE_FORMAT(orderdate, '%Y') AS year 
              FROM prodsoldmonthly WHERE year = '".$yearselected."'";

    $result = mysqli_query($conn, $query);

    echo "<table>
             <tr>
                <th>Category</th>
                <th>Qty</th>
                <th>Order date</th>
             </tr>";
    while($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<td>" . $row['categoryName'] . "</td>";
        echo "<td>" . $row['qty'] . "</td>";
        echo "<td>" . $row['orderdate'] . "</td>";
        echo "</tr>";
    }
    echo "</table>";

    mysqli_close($conn);

?>