Question

嘿，伙计们抱歉这个标题有点误导，这是一个棘手的问题。

所以无论如何，我会首先查看我目前设置的两个网页。

基本上我在我的主页上有这个表格：

<form class="car-finder-container" method="GET" action="used-cars.php">
 <select name="make" class="form-control select-box">
  <option value="make-any">Make (Any)</option>
  <?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC))
  {
  echo '
  <option value="'.$make["Make"].'">'.$make["Make"].'</option>
  ';
  } ?>
 </select>
</form>

select元素只是循环我的SQL表的一列来创建选项，然后使用GET选择用户在used-cars.php页面上选择的相同选项。

这是第二页表单代码：

<form class="car-finder-container dflt-container">
 <select name="make" class="form-control select-box">
  <option value="make-any">Make (Any)</option>
                 <?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC)){
    $selected = $make['Make'] == $_GET['make']?'selected="selected"':'';
    echo '
  <option '.$selected.' value="'.$make["Make"].'">'.$make["Make"].'</option>
        ';
  } ?>
 </select>
</form>

这部分代码工作正常，它选择了基于GET选择的选项，但我确实有一个问题。

表单用于过滤我的页面上显示的div，所有div都在列表中，表单只是使用jQuery来隐藏不具有相同值的类。

这是我正在使用的jQuery：

<script>
    $(document).ready(function(){
  $('.form-control').change(function(){
    var make = $(this).val();
    if(make != 'make-any'){
      $('.makes').hide();
      $('.'+make).show();
      } else {
        $('.makes').show();
        }
    });
  });</script>

当用户选择一个选项时，jQuery会隐藏类，任何没有相同类的div都会被隐藏。

我遇到的问题是，当页面加载div显示时，即使它们与用户在第一页上选择的值不匹配，select元素也有用户在第一页上选择的选项，但所有值与之不匹配的内容并未隐藏。

知道为什么会这样吗？

以下是一个实际示例，您可以查看：http://www.drivencarsales.co.uk/index.php

只需选择“制作”并按“搜索汽车”，您就会注意到列出的div尚未隐藏，如果按“制作”选项卡，您会注意到第一页的“制作”已被选中。 / p>

Answer 1

这是因为只有当<div>的值发生变化时才会隐藏不匹配的<select>。页面加载时默认情况下不会发生这种情况。

您可以在页面加载后使用trigger()方法在change上手动触发<select>事件，以按如下方式运行脚本：

$(document).ready(function(){
  $('.form-control').change(function(){
    var make = $(this).val();
    if(make != 'make-any'){
      $('.makes').hide();
      $('.'+make).show();
     } else {
       $('.makes').show();
    }
  });
  $('.form-control').trigger("change");
});

使用GET表单时，jQuery hide函数不起作用

1 个答案: