通过将

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.