I have a dropdown <select>
HTML menu created from a MySQL table using PHP. Each <option>
value contains a socket, I have a HTML table created from a MySQL table using PHP which contains a column "Socket". I want to filter the table to only show matching sockets to the one selected in the <select>
menu.
I have tried modifying Javascript search code to no success.
The code for the table creation is:
$sql = "SELECT name, price, id, socket, ramslots, maxram, chipset FROM motherboard";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<table id='myTable'><tr><th>Motherboard</th><th>Price</th><th>Socket</th><th>Chipset</th><th>Ram Slots</th><th>Max Ram</th></tr>";
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr><td><a href='https://au.pcpartpicker.com/product/".$row["id"]."' target='_blank'>" . $row["name"]. "</a></td><td>" . $row["price"]."</td><td>" . $row["socket"]."</td><td>" . $row["chipset"]."</td><td>" . $row["ramslots"]."</td><td>" . $row["maxram"]."</td></tr>";
}
echo "</table>";
} else {
echo "0 results";
}
The code for the <select>
menu is:
$sql = "SELECT name, socket FROM cpu";
$result = $connection->query($sql);
if ($result->num_rows > 0) {
echo "<select name='CPUmenu'>";
echo "<option value='CPU'>CPU</option>";
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<option value='".$row["socket"]."'>".$row["name"]."</option>";
}
echo "</select>";
} else {
echo "0 results";
}
Here is the link to the entire webpage code: pastebin.com/WztPQzRG
cpu SQL fiddle: db-fiddle.com/f/teZxiaduNVjuYCj1pWjj73/0
motherboard SQL fiddle: db-fiddle.com/f/pSs8yKNrgTqtiwdTbmWcg/0
Update: Here is my PHP
$sql = "SELECT name, socket FROM cpu";
$result = $connection->query($sql);
if ($result->num_rows > 0) {
echo "<select name='CPUmenu'>";
echo "<option value=''>CPU</option>";
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<option value='". $row["socket"] . "'>".$row["name"]."</option>";
}
echo "</select>";
} else {
echo "0 results";
}
$sql = "SELECT name, price, id, socket, ramslots, maxram, chipset FROM motherboard";
$result = $connection->query($sql);
if ($result->num_rows > 0) {
echo "<table id='myTable'><tr><th>Motherboard</th><th>Price</th><th>Socket</th><th>Chipset</th><th>Ram Slots</th><th>Max Ram</th></tr>";
// output data of each row
while($row = $result->fetch_assoc()) {
echo '<tr data-socket="'. $row['socket'] . '"><td><a href="https://au.pcpartpicker.com/product/' . $row['id'] . '" target="_blank">' . $row['name'] . '</a></td><td>' . $row['price'] . '</td><td>' . $row['socket'] . '</td><td>' . $row['chipset'] . '</td><td>' . $row['ramslots'] . '</td><td>' . $row['maxram'] . '</td></tr>';
}
echo "</table>";
} else {
echo "0 results";
}
Update 2:
I have tried troubleshooting by adding:
echo "<option value='AM4'>AM4</option>";
echo "<option value='LGA1151'>LGA1151</option>";
And
echo "<tr data-socket='AM4'><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
However nothing happens still. All I can think is the script isn't added right or something; here it is:
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$('select[name="CPUmenu"]').change(function(e) {
let socket = $(this).val();
$('tr[data-socket]').show();
if (socket.length) {
$('tr[data-socket!="' + socket + '"]').hide();
}
});
</script>
</body>
</html>
What other troubleshooting steps can I take?
I need to get a Javascript function which runs whenever a new option is selected from the <select>
menu, the function needs to get the selected <select>
menu socket name then loop through each row in the table and check if the socket matches, otherwise hide the row.