jQuery display element that contains certain class strings

Question

Hey guys I am currently developing a site that lists vehicle data using PDO and a MySQL database.

Here is an example of what I currently have: http://www.drivencarsales.co.uk/

So basically each row in the MySQL table contains all of the data for each vehicle and I am printing them into a list using the following code:

<?php include('db-affinity/filter.php'); ?>
      <div class="col-md-8 col-sm-8 col-lg-8">
      <?php while($row = $results->fetch(PDO::FETCH_ASSOC))
      {
      echo '
        <div class="listing-container ' . $row["Make"] . '">
          <a href="carpage.php"><h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3></a>
          <h3 class="price-listing">£'.number_format($row['Price']).'</h3>
        </div>
        <div class="listing-container-spec">
         <img src="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder"/>
          <div class="ul-listing-container">
            <ul class="overwrite-btstrp-ul">
              <li class="diesel-svg list-svg">'.$row["FuelType"].'</li>
              <li class="saloon-svg list-svg">'.$row["Bodytype"].'</li>
              <li class="gear-svg list-svg">'.$row["Transmission"].'</li>
              <li class="color-svg list-svg">'.$row["Colour"].'</li>
            </ul>
          </div>
          <ul class="overwrite-btstrp-ul other-specs-ul h4-style">
            <li>Mileage: '.number_format($row["Mileage"]).'</li>
            <li>Engine size: '.$row["EngineSize"].'cc</li>
          </ul>
          <button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> History checked 
          </button>
          <button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details 
          </button>
          <button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> Test drive 
          </button>
          <h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 More photos</h4>
        </div>
          ';
      } ?>
      </div>
      </div>
      </div>

<script>$(“.select-box”).change( function() {

    // get the value of the select element
    var make = $(this).val();


    //get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
    $(“.listing-container”).not(“.” + make).hide();
});</script>

As you can see I am using a while loop to display every row I have also added the 'Make' of the vehicle to the listing container class, there is also a bit of jQuery however I will explain what that is used for shortly.

I then have this form:

<div class="container con-col-listing">
    <div class="row">
      <div class="col-md-4 col-sm-4">
       <form class="car-finder-container dflt-container">
         <h2 class="h2-finder">Car finder</h2>
         <ul class="toggle-view">
           <li class="li-toggle">
            <h4 class="h4-finder-toggle">Make<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
            <div class="panel">
             <select class="form-control select-box" name="">
                 <option value="make-any">Make (Any)</option>
                 <?php while($make = $filterres->fetch(PDO::FETCH_ASSOC))
                 {
                 echo '
                 <option value="">'.$make["Make"].'</option>
                 ';
                 } ?>
             </select>
             <select class="form-control last-select select-box">
                 <option value="model-any">Model (Any)</option>
                 <option value="two">Two</option>
                 <option value="three">Three</option>
                 <option value="four">Four</option>
                 <option value="five">Five</option>
             </select>
            </div>
           </li>
           <li class="li-toggle">
            <h4 class="h4-finder-toggle">Body type<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
            <div class="panel">
             <input id="four-by-four-checkbox" class="float-checkbox" type="checkbox"/>
             <label for="four-by-four-checkbox" class="label-checkbox">4x4</label>
             <input id="convertible-checkbox" class="float-checkbox" type="checkbox"/>
             <label for="convertible-checkbox" class="label-checkbox">Convertible</label>
             <input id="coupe-checkbox" class="float-checkbox" type="checkbox"/>
             <label for="coupe-checkbox" class="label-checkbox">Coupe</label>
            </div>
          </li>
          <li class="li-toggle">
            <h4 class="h4-finder-toggle">Transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
            <div class="panel">
             <input id="automatic-checkbox" class="float-checkbox" type="checkbox"/>
             <label for="automatic-checkbox" class="label-checkbox">Automatic</label>
             <input id="manual-checkbox" class="float-checkbox" type="checkbox"/>
             <label for="manual-checkbox" class="label-checkbox">Manual</label>
             <input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/>
             <label for="semi-auto-checkbox" class="label-checkbox">Semi automatic</label>
            </div>
          </li>
        </ul>
         <button href="#" class="btn btn-block car-search-button btn-lg btn-success"><span class="glyphicon car-search-g glyphicon-search"></span> Search cars 
         </button>
         <h4 class="h4-finder"><a href="#">Try our Smart Search </a><span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4>
       </form>
      </div>

You only need to take notice to the start of the form, as you can see the 'Make's' of the vehicles are displayed in the select element options using a while loop.

Now back to the jQuery:

<script>$(“.select-box”).change( function() {

    // get the value of the select element
    var make = $(this).val();


    //get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
    $(“.listing-container”).not(“.” + make).hide();
});</script>

I have tried adding this jQuery to show the classes that display the same 'Make' selected in the options of the select element and hide the classes that do not contain that class in the listing-container div.

For some reason when the option is selected the jQuery isn't displaying the classes that have the same 'Make' as the option selected.

Any idea where I am going wrong?

BTW I know I should be using AJAX for this however I wouldn't know where to start.

Answer 1

You need to insert a value into the option tags of your Make .select-box . Each of the option tags is given with <option value="">'.$make["Make"].'</option> .

Thus $(this).val() will return an empty string. Try something like: '<option value="'. $make["Make"].'">'.$make["Make"].'</option> instead.

Answer 2

Make the changes indicated below:

option

         <option>'.$make["Make"].'</option>

jQuery

//Wait for DOM to load
$(document).ready(function() {
    $(“.select-box”).change( function() {

        // get the value of the select element
        var make = $(this).val();


        //get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
        $(“.listing-container”).not(“.” + make).hide();
    });
});

UPDATE

After reviewing your page, the only code you need at the current location, EXACTLY AS SHOWN , is:

$(".select-box").first().change( function() {
    var make = $(this).val();
    if( make != 'make-any' ) { 
        $('.' + make).show().next('.listing-container-spec').show();
        $(".listing-container").not("." + make).hide()
        .next('.listing-container-spec').hide();
    }
}).change();