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"] . '">
<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>
</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">Try our Smart Search <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.
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.
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();
Related
Im currently developing a project at my job, im using Laravel as my framework and im using KeenThemes as my frontend. I believe they have their variation of the Datatables library and maybe that's why im having this issue. Since i can't find a well documented example of the metronic Datatable library im using the original Datatable documentation to work on this project. Ok, so on to the problem. This is my blade component for the datatable.
<div class="m-portlet m-portlet--mobile m-portlet--rounded">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
{{$title}}
</div>
</div>
<div class="m-portlet__head-tools">
{{$buttons}}
<ul class="m-portlet__nav">
<li class="m-portlet__nav-item">
<div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" m-dropdown-toggle="hover"
aria-expanded="true">
<a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary m-btn m-btn--icon m-btn--icon-only m-btn--pill m-dropdown__toggle">
<i class="la la-ellipsis-h m--font-brand"></i>
</a>
<div class="m-dropdown__wrapper">
<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
<div class="m-dropdown__inner">
<div class="m-dropdown__body">
<div class="m-dropdown__content">
<ul class="m-nav">
<li class="m-nav__section m-nav__section--first">
<span class="m-nav__section-text">Acciones</span>
</li>
{{$actions}}
<li class="m-nav__separator m-nav__separator--fit m--hide">
</li>
<li class="m-nav__item m--hide">
Submit
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
{{-- begin - search input --}}
<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
<div class="row align-items-center">
<div class="col-xl-8 order-2 order-xl-1">
<div class="form-group m-form__group row align-items-center">
<div class="col-md-4">
<div class="m-form__group m-form__group--inline">
<div class="m-form__label">
<label>Status:</label>
</div>
<div class="m-form__control">
<select class="form-control m-bootstrap-select" id="m_form_estado">
<option value="">All</option>
<option value="1">En servicio</option>
<option value="6">En Busqueda</option>
<option value="5">En Saneamiento</option>
<option value="3">En Obra</option>
<option value="2">En Instalación</option>
<option value="4">Listo Para Ejecutar</option>
<option value="12">Sin Estado</option>
<option value="14">Caido</option>
<option value="15">Retirado</option>
</select>
</div>
</div>
<div class="d-md-none m--margin-bottom-10"></div>
</div>
<div class="col-md-4">
<div class="m-form__group m-form__group--inline">
<div class="m-form__label">
<label class="m-label m-label--single">Type:</label>
</div>
<div class="m-form__control">
<select class="form-control m-bootstrap-select" id="m_form_type">
<option value="">All</option>
<option value="1">Online</option>
<option value="2">Retail</option>
<option value="3">Direct</option>
</select>
</div>
</div>
<div class="d-md-none m--margin-bottom-10"></div>
</div>
<div class="col-md-4">
<div class="m-input-icon m-input-icon--left">
<input type="text" class="form-control m-input" placeholder="Search..." id="generalSearch">
<span class="m-input-icon__icon m-input-icon__icon--left">
<span><i class="la la-search"></i></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- end - search input --}}
<!--begin: Datatable -->
<div class="m_datatable" id="m_datatable"></div>
<!--end: Datatable -->
</div>
Now, this is some of the javascript im using to render and fill the table with data. The part im gonna paste is where i define the fuction to search data and also the definition of the column i wanna get from the row.
{
field: "IdEstacion",
title: "#",
width: 40,
sortable: !0,
selector: !1,
textAlign: "center",
responsive: {
hidden: 'lg'
},
template: '{{IdEstacion}}',
query: {},
sort: {
sort: "asc",
field: "IdEstacion"
}
{...}
$("#m_datatable").on("click", "tr", function () {
var tr=$(this).parents("tr")[0];
var row=t.row(row).data();
console.log(row));
alert(row);
})
I've checked the console and also checked the values in the debug and row is returning an object, however, it is returning the whole datatable not just the row i clicked on. And when I try to reference a value from the row variable i keep getting undefined on the console and on the alert. Am i missing something? Thanks in advance.
EDIT: adding my json structure
JSON value #1
$('#YourTable tbody').on( 'click', 'a', function () {
var data = '';
data = YourTable.row( $(this).parents('tr') ).data();
//to do this your table need to be declared like this
//yourTable= $('#YourTable').DataTable();
console.log(data);
var carId= data['id'];
console.log(carId);
})
The idea is right, but there seem to be a few typos in your example.
var tr=$(this).parents("tr")[0] is not needed, change row to this in var row=t.row(row).data();
There's a syntax problem in console.log(row));
Also, t needs to be defined.
var t = $("#m_datatable").DataTable();
t.on("click", "tr", function () {
var row = t.row(this).data();
console.log(row);
alert(row);
})
I have two dropdown selections where when you click on the option with value "other", it generates a text area just below the dropdown form.
Both areas work fine but to do so I had to create separate parent wrappers for both and I don't want that because I will be dynamically adding more dropdowns and it will be hard to dynamically make more unique parent wrapper divs.
I want each dropdown to be different from each other with their own textboxes generated.
I have made the entire code available in this pen
Code for your reference
HTML
<section id="alterationForm1">
<div class="card">
<div class="imgCard">
<img src="http://abhisheksuresh.online/alter/assets/uploadImage.svg" alt="upload-image" height="128px" width="128px">
<span class="badge badge-success" style="z-index: 1; position: absolute;" data-toggle="tooltip" data-placement="left" title="Tap on the image to upload picture of your defected garment"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
</div>
<!--Dropdown List-->
<div class="form-group">
<label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
<select class="form-control alterationTypeSelect" name="alterationTypeSelect">
<option value="button">Button</option>
<option value="stitching">Stitching</option>
<option value="cloth">Cloth</option>
<option value="fabrics">Fabrics</option>
<option value="otherClick">Other</option>
</select>
</div>
<div class="hideMe textBoxDiv">
<div class="form-group">
<label for="exampleFormControlTextarea1">Additional alteration details</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</div><!--text box div-->
<div class="submitButton text-center">
Submit
</div><!--submitButton-->
</div><!--card-->
</section><!--alteration form-->
<div data-duplicate="demo" class="demoClass">
<div class="card">
<div class="imgCard">
<img src="http://abhisheksuresh.online/alter/assets/uploadImage.svg" alt="upload-image" height="128px" width="128px">
<span class="badge badge-success" style="z-index: 1; position: absolute;" data-toggle="tooltip" data-placement="left" title="Tap on the image to upload picture of your defected garment"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
</div>
<!--Dropdown List-->
<div class="form-group">
<label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
<select class="form-control alterationTypeSelect" name="alterationTypeSelect">
<option value="button">Button</option>
<option value="stitching">Stitching</option>
<option value="cloth">Cloth</option>
<option value="fabrics">Fabrics</option>
<option value="otherClick">Other</option>
</select>
</div>
<div class="hideMe textBoxDiv">
<div class="form-group">
<label for="exampleFormControlTextarea1">Additional alteration details</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</div><!--text box div-->
<div class="submitButton text-center">
Submit
</div><!--submitButton-->
</div><!--card-->
<div id="addOnButton" class="text-center">
<button class="btn-danger btn-sm" data-duplicate-add="demo">Add More</button>
</div>
</div><!--demo class-->
JS
//When clicked on option with "other" value
$('#alterationForm1 .alterationTypeSelect').on('change', function(){
var val = $(this).val();
if(val === 'otherClick') {
$('#alterationForm1 .textBoxDiv').removeClass('hideMe');
}
else{
$('#alterationForm1 .textBoxDiv').addClass('hideMe');
}
});
$('#alterationSection2 .alterationTypeSelect').on('change', function(){
var val = $(this).val();
if (val === 'otherClick') {
$('#alterationSection2 .textBoxDiv').removeClass('hideMe');
}
else{
$('#alterationSection2 .textBoxDiv').addClass('hideMe');
}
});
$('.demoClass .alterationTypeSelect').on('change',function(){
var val = $(this).val();
if (val === 'otherClick') {
$('.demoClass .textBoxDiv').removeClass('hideMe');
}
else{
$('.demoClass .textBoxDiv').addClass('hideMe');
}
});
//Dynamic Adding
$("#czContainer").czMore();
Thank you so much for the help. I am in a great need for this help. Please find the pen link to better understand the entire problem.
please follow the below pen as I have modified your code as we want elements to be dynamically triggered:
https://codepen.io/anon/pen/NYyvpy?editors=1011
//question mark tooltip
$('[data-toggle="tooltip"]').tooltip()
//When clicked on other button
$('body').on('change','.alterationTypeSelect', function(){
console.log(544);
var val = $(this).val();
if(val === 'otherClick') {
$(this).parent().parent().find('.textBoxDiv').removeClass('hideMe');
}
else{
$(this).parent().parent().find('.textBoxDiv').addClass('hideMe');
}
});
//Dynamic Adding
$("#czContainer").czMore();
Also, follow this link if you want to understand how newly added elements work with events
Event binding on dynamically created elements?
I have a Dropdown menu that is loaded with user names from a database. I want to populate the users balance into the textbox below it when a name is selected. I am able to pass the current dropdown value to the below text box with the following code, but I need to be able to maintain the value of the dropdown value(user_id) to pass to the form. I know very little javascript; hoping someone can give me a hand.
Thanks.
function set_to(id)
{
$('#private_list').val(id);
}
<div class="wrapper container">
<div class="row">
<div id="loginbox" class="mainbox col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
<div class="panel panel-default" >
<div class="panel-heading">
<div class="panel-title text-center"><strong>Adjust Balance</strong> </div>
</div>
<div class="panel-body" >
<form action="adjust_balance" name="adjust_balance" id="login-form" class="form-horizontal" enctype="multipart/form-data" method="POST">
<option value="" disabled selected>Select User Name</option>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<select class="form-control" name="id" onchange="javascript:set_to(this.value);"">
<?php
foreach($users as $row){
echo '<option value="'.$row->id.'">'.$row->first_name.' '.$row->last_name.'</option>';
}
?>
</select>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-usd"></i></span>
<input id="private_list" type="text" id="private_list" name="balance" class="form-control" name="balance" value="" placeholder="Balance">
</div>
<br>
<br>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<!--<button type="submit" href="#private_list" class="btn btn-success pull-left"><i class="fa fa-upload"></i> Load List</button>-->
<button type="submit" href="#" class="btn btn-success pull-right"> <i class="fa fa-upload"></i> Update User Balance</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
you have to send a ajax request to your controller with user-id in the data .At the server side you will get this user-id and make query which will give you required result against that user.Now you have to populate that record in select options and echo them.You will get these options in success data .Then simply you have to put these options in select.
$('#select-id').change(function (){
var select-value=$('#select-id').val();
$.ajax({
url:"url-of-controller",
data:{user-id:select-value},
type:"get",
success:function (data){
$("#target-select").html(data);
},
error:function (err){
alert(err);
}
});
});
I was able to make it work with this; probably not the best solution but I have been coding for about a week and it works.
$('#userbalanceselector').on('change', function () {
var val = this.value;
var parts = val.split("_");
$('#balance').val(parts[0]);
$('#user_id').val(parts[1]);
});
I'm using code from this fiddle http://jsfiddle.net/kcpma/18/
what i'm trying to achieve is to make appear or unhide a bootstrap label depending the value selected from the button, the text from the label should change, but only works with html input form like text, this doesn't look bad but i want to use bootstrap label to make look like filter tags.
my script
<script>
$('#demolist li').on('click', function(){
var val=$(this).text();
$('#datebox').val($(this).text());
if(val=="A"){ // if certain filter is selected the label should appear
$('#filter').show();
$('#filter').val("AaA");
}else{ // else the tag shouldn't be visible
$('#filter').hide();
}
});
</script>
the actual html working with text input
<br /> <br />
<div class="container">
<div class="col-sm-8">
<div class="input-group">
<input type="TextBox" ID="datebox" Class="form-control" ></input>
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>
</div>
</div>
<br>
<h4 ><span class="label label-primary" >×</span></h4>
<p><input type="text" class="form-control" ID="filter" style="width:100px" disabled></p>
</div>
the html i tried but it doesn't work
1)
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
2)
<h4 ID="filter"><span class="label label-primary">some filter</span></h4>
any hints/ideas?
$.val only works on input elements (including select). If you want to set the text, you could just do:
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
and
$('#filter').html("AaA");
or
$('#filter').text("AaA");
http://jsfiddle.net/kcpma/261/
Hey guys I am trying to save the option that a user has selected on my form however I am unsure how I can do this.
I will briefly explain my setup...
I have this form on my home page:
<form class="form-home form-search">
<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>
<button href="used-cars.php">Search</button>
</form>
As you can see it is using PHP/MySQL to show the options available.
Okay so I then have this form on another page however the CSS styling is slightly different and it includes a few different select elements.
So when a user has selected an element on the home page all the button does is href to the used-cars.php which lists all of the results.
How can I make it so that jQuery saves the option the user selected on the home page and loads the used-cars.php with those options selected?
Any examples would be great.
EDITED
Example of my second 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 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 value="'.$make["Make"].'">'.$make["Make"].'</option>
';
} ?>
</select>
<select class="form-control last-select select-box">
<option value="model-any">Model (Any)</option>
<?php while($model = $modelFilter->fetch(PDO::FETCH_ASSOC))
{
echo '
<option value="'.$model["Model"].'">'.$model["Model"].'</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">Try our Smart Search <span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4>
</form>
</div>
Easiest way is with a get request:
<form class="form-home form-search" method="GET" action="used-cars.php">
<select name="make" class="form-control select-box">
.....
<button type="submit">Search</button>
</form>
and on used-cars.php:
var_dump($_GET['make']);
EDIT
lets suppose on the form on the first page you have:
<option value="ford">ford</option>
<option value="pontiac">pontiac</option>
<option value="fiat">fiat</option>
when you hit the submit button $_GET['make'] on used-cars.php will be whatever was selected lets say fiat.
so now on used-cars.php you can do this:
<?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC)){
$selected = $make['Make'] == $_GET['make']?'selected="selected"':'';
echo '
<option '.$selected.' value="'.$make["Make"].'">'.$make["Make"].'</option>
';
} ?>