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

任何想法，为什么这可能会发生？

这是一个活生生的例子，所以你可以看看：http://www.drivencarsales.co.uk/index.php

只需选择一个“制作”，然后按“搜索汽车”，你会发现，上市div的不隐藏但如果您按下“制作'选项卡，您会注意到第1页的'制作'被选中。

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