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