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

时间:2016-04-18 14:36:01

标签: php html mysql

我只有两个表: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>

非常感谢您的帮助:)

1 个答案:

答案 0 :(得分:0)

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

然后你需要在Onchange method中放置一个JQuery Document ready

<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,并且只会在Select Box更改时显示所选TR