Question

我有一个使用PHP从MySQL表创建的下拉菜单中选择的套接字匹配的套接字。我尝试修改Javascript搜索代码没有成功。创建表的代码是： $ sql =“从主板上选择名称，价格，id，插座，ramslots，maxram，芯片组”； $ result = $ conn-> query（$ sql）; 如果（$ result-> num_rows> 0）{ echo“ ”； //输出每一行的数据 while（$ row = $ result-> fetch_assoc（））{ 回声“ ”; } 回声“

Motherboard	Price	Socket	Chipset	Ram Slots	Max Ram
”。 $ row [“ name”]。 “	”。 $ row [“ price”]。“	”。 $ row [“ socket”]。“	”。 $ row [“ chipset”]。“	”。 $ row [“ ramslots”]。“	”。 $ row [“ maxram”]。“

”; }其他{ 回显“ 0结果”； } ”; }其他{ 回显“ 0结果”； } 这是整个网页代码的链接：pastebin.com/WztPQzRG cpu SQL提琴：db-fiddle.com/f/teZxiaduNVjuYCj1pWjj73/0 主板SQL提琴：db-fiddle.com/f/pSs8yKNrgTqtiwdTbmWcg/0 更新：这是我的PHP $ sql =“选择名称，套接字来自cpu”； $ result = $ connection-> query（$ sql）; 如果（$ result-> num_rows> 0）{ 回声“ <选择名称='CPU菜单'>”; 回声“ <选项值=”> CPU ”; //输出每一行的数据 while（$ row = $ result-> fetch_assoc（））{ 回显“ <选项值='”。 $ row [“ socket”]。 “'>”。$ row [“ name”]。“ ”; } 回声“ ”; }其他{ 回显“ 0结果”； } $ sql =“从主板上选择名称，价格，id，插座，ramslots，maxram，芯片组”； $ result = $ connection-> query（$ sql）; 如果（$ result-> num_rows> 0）{ echo“ ”； //输出每一行的数据 while（$ row = $ result-> fetch_assoc（））{ 回显''; } 回声“

Motherboard	Price	Socket	Chipset	Ram Slots	Max Ram
'。 $ row ['name']。 '	'。 $ row ['price']。 '	'。 $ row ['socket']。 '	'。 $ row ['chipset']。 '	'。 $ row ['ramslots']。 '	'。 $ row ['maxram']。 '

”; }其他{ 回显“ 0结果”； } 更新2：我尝试通过添加以下内容进行故障排除：回声“ <选项值='AM4'> AM4 ”; echo“ <选项值='LGA1151'> LGA1151 ”; 和回声“ ”；但是什么也没发生。我所能想到的是脚本未正确添加或其他内容；这里是： <脚本 src =“ https://code.jquery.com/jquery-3.3.1.min.js” 完整性=“ sha256-FgpCb / KJQlLNfOu91ta32o / NMZxltwRo8QtmkMRdAu8 =” crossorigin =“ anonymous”> <脚本> $（'select [name =“ CPUmenu”]'）。change（function（e）{ 让套接字= $（this）.val（）; $（'tr [data-socket]'）。show（）; 如果（socket.length）{ $（'tr [data-socket！=“'+ socket +'”]'）。hide（）; } }）; 我还可以采取其他哪些故障排除步骤？我需要获得一个Javascript函数，该函数只要从菜单套接字名称，然后循环遍历表中的每一行并检查套接字是否匹配，否则隐藏该行。

Answer 1

首先在表行中添加一些内容以标识套接字。让我们使用数据属性：

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 "<option value=''>CPU</option>";

我将建议您使用jQuery，因为它将使您的生活更轻松。因此，请在您的身体标签关闭之前添加

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

然后，您需要创建一个侦听器以更改选择，然后隐藏与所选CPU插槽不匹配的所有内容。在包含jQuery库的脚本标签之后添加正确的文字。

<script>
    $(function() {
        $('select[name="CPUmenu"]').change(function(e) {
          let socket = $(this).val();
          $('tr[data-socket]').show();
          if (socket.length) {
            $('tr[data-socket!="' + socket + '"]').hide();
          }
        });
    });
</script>

通过将<select>值与列值（PHP，HTML，Javascript）进行比较来过滤HTML表

1 个答案: