php表显示了mysql下拉选择中的数据


php table show data from mysql drop down selection

我有两个表:Course_table和Major_table,它们都有关系实体。我已经创建了一个下拉列表,并将其链接到Major_table,还有一个html表将它链接到Course_table。我想做的是根据下拉列表中的选择在Course_table上显示数据,但当我选择某个内容并按"筛选"时,它会显示一个空表。

这是我的第一个代码:

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

非常感谢您的帮助:)

在您的第二个代码中,您需要使您的<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>";
        }

然后,您需要将JQueryOnchange方法放置在Documentready:中

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