jQuery hide function doesn't work when using GET form

Question

Hey guys sorry for the title being a bit misleading it's a bit of tricky question.

So anyway I will first go over my current setup of my two web pages.

Basically I have this form on my homepage:

<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>

The select element just loops a column of my SQL table to create the options, it's then using GET to select the same option that has been selected by the user on the used-cars.php page.

Here is the second page form code:

<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>

This part of the code is working fine it selects the option selected based on GET, I do have one issue though.

The form is used to filter what div's are shown on my page, all of the div's are in a list and the form simply uses jQuery to hide classes that don't have the same value.

This is the jQuery I am using:

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

The jQuery hides classes when the user selects an option, any div's that don't have the same class are hidden.

The issue I am having is that when the page loads div's are showing even if they don't match the value that the user selected on page one, the select element has the option the user selected on page one but all the values that don't match it aren't hidden.

Any idea why this might be happening?

Here is a live example so you can take a look: http://www.drivencarsales.co.uk/index.php

Simply pick a 'Make' and press 'Search cars' and you will notice that listed div's aren't hidden yet if you press the 'Make' tab you will notice that the 'Make' from page one is selected.

Answer 1

This is because you are hiding the mismatched <div> s only when the value of <select> changes. Which does not occur by default when the page loads.

You can manually trigger a change event on the <select> using the trigger() method after page load to run your script as follows:

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