如何从下拉列表中获取选定的值并在查询中使用它而不单击提交？

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

?>