PHP, MySQL & jQuery: Display select options dynamically - php

Question

having a bit of a problem here understanding how I can make the following action happen on my web page:
Right so at the moment I have two select elements on my page, one of the select elements looks like this:
<select 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>
As you can see this code is looping the 'Make' column of my SQL table, in the separate file that contains the queries I have made it so the query is using DISTINCT so it doesn't loop the same 'Makes' as the chances are there will be identical 'Makes' in the column.
I then have this block of code that displays another query into the front end:
<?php while($row = $results->fetch(PDO::FETCH_ASSOC))
{
echo '
<div class="makes ' . $row["Make"] . '">
<div class="listing-container">
<h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3>
<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>
';
} ?>
As you can see that block is looping various columns of my SQL table to display pretty much the whole table. PLEASE NOTE that the div with the class of 'makes' also includes the column 'Make' in the div.
I then use this jQuery to filter what results are brought to the screen:
<script>
$(document).ready(function(){
$('.form-control').change(function(){
var make = $(this).val();
if(make != 'make-any'){
$('.makes').hide();
$('.'+make).show();
} else {
$('.makes').show();
}
});
});</script>
As you can see it simply hides divs that don't have the class of the select value that has been selected.
So all of that is great however I get the feeling it just isn't enough for my users, I now want the users to be able to use a second select element to select a 'Model' of the 'Make'.
Now I know I could easily do this with the same technique I did at first but then users would be able to select 'BMW' and then select a model that wasn't associated with the 'Make' and no results would be returned.
I'd like my select element that contains the 'Models' to first of all be disabled until a user has selected a 'Make' then when a user has selected the 'Make' I'd like the second select element to show only the 'Models' that are associated with that 'Make'.
Here is an example of the columns in my SQL table:
Make, Model, Colour, FuelType, Year, Mileage, Bodytype, Doors, Variant, EngineSize, Price, Transmission, PictureRefs, ServiceHistory, PreviousOwners, Options, FourWheelDrive
I am now unsure how I can make this happen, it's really baffled me.
If someone could show me a detailed example and explain what each part does that would be great as I am a little stuck, thanks.

Answer 1

There are two options:
you could preload the data and save it as an object in JS and display when needed.
Or you could use ajax-calls to load the data when you need it(most websites do that nowadays)
use
$('makeselect').on('change', function() {
$.get("getmodels.php?make="+$("makeselect").val(),function(data){
var models=json.parse(data);
//iterate through the object and create the option tags
});
});
and give the select an id.
on php you should send the data encoded with json. json_encode(...)