使用GET表单时，jQuery隐藏功能不起作用

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与用户在第一页上选择的值不匹配，当页面显示div时，select元素仍具有用户在第一页上选择的选项，但所有不匹配的值不会被隐藏。

知道为什么会这样吗？

这是一个实时示例，因此您可以看一下： http : //www.drivencarsales.co.uk/index.php

只需选择一个“制造”并按“搜索汽车”，您会发现尚未隐藏列出的div，如果您按“制造”标签，您会注意到已选择了第一页的“制造”。

Answer 1

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

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

$(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");
});