php表显示来自mysql下拉选择的数据

Question

只是我有两个表：Course_table和Major_table，它们都有关系实体。 我创建了一个下拉列表，并将其链接到Major_table，一个html表将其链接到Course_table。 我想做的是根据下拉列表中的选择在Course_table上显示数据，但是当我选择某项并按“ Filter”时，它显示一个空表。

这是我的第一个代码：

<form method="post" action="staff-page.php">
                            <label for="majorFilter">Select Major: <select id="majorFilter" name="majorFilter">
                            <option value="0">Select a major</option>
                            <?php
                                include ('partials/connectDb.php');

                                $sql = "SELECT * FROM major_table;";
                                $run_query = mysqli_query($conn, $sql);

                                while ($row = mysqli_fetch_array($run_query)) {
                                    $m_id = $row['major_id'];
                                    $m_name = $row['major_name'];

                                    echo "<option value='{$m_id}'>{$m_name}</option>";
                                }
                            ?>
                            </select></label>
                            <Button type="button" name="filter" id="filter">Filter</Button>
                        </form>

这是我的第二个代码：

<table style="height: 400px; width: 600px; overflow: auto; display: none;" id="courseTable">
                            <caption>Course Table</caption>
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Code</th>
                                    <th style="padding-right: 10px;">Cr</th>
                                    <th>Major</th>
                                    <th>Students Enrolled</th>
                                </tr>
                            </thead>

                            <?php
                                error_reporting(0);
                                $conn = mysqli_connect('localhost', 'root', '', 'srs-db') or die('ERROR: Cannot Connect='.mysql_error($conn));


                                $query = "SELECT course_table.course_name, course_table.course_code, course_table.cr, major_table.major_name, course_table.students_enrolled FROM course_table
                                INNER JOIN major_table ON course_table.major = major_table.major_id
                                WHERE course_table.major = '$m_id';";

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

                                while ($course = mysqli_fetch_array($sql)) {
                                    # code...
                                    echo "<tr>";
                                    echo "<td>.$course[course_name].</td>";
                                    echo "<td>.$course[course_code].</td>";
                                    echo "<td>.$course[cr].</td>";
                                    echo "<td>.$course[major_name].</td>";
                                    echo "<td>.$course[students_enrolled].</td>";
                                    echo "</tr>";
                                }
                            ?>

                        </table>

非常感谢您的帮助 ：）

Answer 1

在第二个代码中，您需要使您的<tr> id为基础，并为所有它们应用一个类。 像这样：

        while ($course = mysqli_fetch_array($sql)) {
              # code...
              echo "<tr class='all_trs' id='display_".$m_id."' style='display:none;'>";
              echo "<td>.$course[course_name].</td>";
              echo "<td>.$course[course_code].</td>";
              echo "<td>.$course[cr].</td>";
              echo "<td>.$course[major_name].</td>";
              echo "<td>.$course[students_enrolled].</td>";
              echo "</tr>";
        }

然后，您需要在Document ready中放置一个JQuery Onchange方法 ：

<script type="text/javascript">
    $(function() {
        // will be triggered on Change of your Select box
        $( "#majorFilter" ).change(function() {

          alert("Select Box changed");
          // Hiding all Trs by default.
          $( ".all_trs" ).hide();
          // Showing just the specific TR which is selected in select box
          $( "#display_" + $(this).val() ).show();

        });
    });
</script>

您可能会注意到，我已经使用display:none来回显<tr> html，这是因为，默认情况下，我隐藏了所有TR，并且只会在“选择框”更改中显示所选的TR。