我只有两个表: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>
非常感谢您的帮助:)
答案 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