We Keep Coding

ASP.net razor pages and multi-select, posting all items in select

I have a form which has two selects, one on the left, one on the right. One on the left to list the items to add, two buttons, one to add and one to remove items to another select using a bit of jQuery. Both selects have the multiple="multiple" attributes set.
The problem is, when I submit the form, only items selected in the right hand select are posted in the form data, which is expected. I have added the following bit of jQuery to select all of the items in the select list on submit, but it still only sends the data of the single selected item before the submit button is pressed:
$("#pageForm").submit(function (e) {
$("#controlGradesList option").prop("selected", "selected");
});
This is my form markup:
<form method="post" id="pageForm">
#Html.HiddenFor(x => x.Data.Ref)
<div class="row">
<div class="col-sm-5">
<h3>All grades</h3>
<div class="form-group">
<input type="text" id="filterBox" class="form-control" placeholder="Filter grades" />
</div>
<div class="form-group">
<select class="form-control" size="20" multiple="multiple" id="gradesList" asp-items="#(new SelectList(Model.Data.AvailableGrades, "Ref", "Display"))">
</select>
</div>
</div>
<div class="col-sm-2">
<div class="push-down-arrows">
<div class="form-group">
<input type="button" class="btn btn-primary btn-block" id="addButton" value=">>" title="Add grade to control group" />
</div>
<div class="form-group">
<input type="button" class="btn btn-primary btn-block" id="removeButton" value="<<" title="Remove grade from control group" />
</div>
</div>
</div>
<div class="col-sm-5">
<h3>Associated grades</h3>
<div class="grades-padding-top">
<div class="form-group">
<select class="form-control" size="20" multiple="multiple" id="controlGradesList" asp-for="Data.AssociatedGradeRefs" asp-items="#(new SelectList(Model.Data.AssociatedGrades, "Ref", "Display"))">
</select>
</div>
</div>
</div>
</div>
<hr />
<button class="btn btn-primary" type="submit"><i class="fa fa-save"> </i>Save</button>
| Back to previous page
</form>
What am I missing here?

I needed to use and onclick event on the button to select all of the options in the select, prevent default and submit the form:
<button class="btn btn-primary" type="submit" onclick="submitForm(event)"><i class="fa fa-save"> </i>Save</button>
and
function submitForm(e) {
$("#controlGradesList option").prop("selected", true);
e.preventDefault();
$('#pageForm')[0].submit();
}

Using slideToggle to hide/show advanced options, child elements visible

Problem
I've created a click function to show and hide advanced search options.
When I click the Click to show advanced options button the select fields are visible when the div slides up, but the outer container has already been set to a fixed height and as a result this transition looks feels very abrupt.
Looking for a better way to set the two heights so I don't need have
to rely on a fixed number, height: 100% didn't seem to work
JSFiddle: https://jsfiddle.net/69jg5a4d/
scripts.js
$(".feature__text--search").on("click", function(){
$(".advanced__wrapper").toggleClass("is-open");
if ($(".advanced__wrapper").hasClass("is-open")) {
$(".header__search.search--home").css({"height": "384px", "max-height": "none"});
$(".advanced__wrapper").slideToggle();
} else {
$(".advanced__wrapper").slideToggle();
$(".header__search.search--home").css({"height": "110px", "max-height": "110px"});
}
index.html
<div class="header__search search--home">
<div class="header__search--simple">
<i class="fa fa-search fa-search-home" aria-hidden="true"></i>
<input type="text" name="" placeholder="Enter a school name" class="input--address">
<button class="btn btn--submit">Submit</button>
</div>
<div class="feature__teaser--search">
<p class="feature__text--search">Click to <span>show</span> advanced options</p>
<div class="advanced__wrapper advanced__wrapper--home">
<!-- <p class="advanced__text">Advanced options</p> -->
<div class="advanced advanced--home">
<div class="advanced__third">
<select class="select--type type--results">
<option>All schools types</option>
<option>Elementary School</option>
<option>Middle School</option>
<option>High School</option>
<option>Technical School</option>
<option>Alternative School</option>
</select>
<i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
</div>
<div class="advanced__third">
<select class="select--counties counties--results">
<option>All counties</option>
</select>
<i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
</div>
<div class="advanced__third">
<select class="select--distance distance--results">
<option>Short drive ( < 5 miles)</option>
<option>Walking distance ( < 1 mile )</option>
</select>
<i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
</div>
<div class="advanced__address">
<input type="text" name="" placeholder="Enter an address or ZIP code" class="input--address--extra">
</div>
<div class="checkbox__group">
<div class="checkbox__inner">
<input type="checkbox" name="">
<label class="label--checkbox">Show schools in the St. Louis metro area</label>
</div>
</div>
</div> <!-- .advanced -->
</div> <!-- .advanced__wrapper -->
</div>
<div class="header__search--advanced">
<input type="text" name="" placeholder="Enter your address" class="input--address">
<div class="checkbox__group">
<i class="fa fa-times" aria-hidden="true"></i>
<input type="checkbox" name="">
<label class="label--checkbox">Show schools in the St. Louis metro area</label>
</div>
<select class="select--type type--home">
<option>All school types</option>
<option>Elementary School</option>
<option>Middle School</option>
<option>High School</option>
<option>Technical School</option>
<option>Alternative School</option>
</select>
<i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
<select class="select--counties">
<option>All counties</option>
</select>
<i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
<select class="select--distance">
<option>Short drive ( < 5 miles)</option>
<option>Walking distance ( < 1 mile )</option>
</select>
<i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
</div>
</div>

I've modified your fiddle, please let me know if this is what you are looking for: https://jsfiddle.net/69jg5a4d/4/
Changes to CSS
.search--home {
overflow: auto;
max-height: 100vh;
}
/* modified .feature__teaser--search */
.feature__teaser--search {
/* removed height */
}
/* modified the height of .header__search */
.header__search {
/* removed max-height */
height: auto;
}
Change to JS
// commented these 2 lines
// $(".header__search.search--home").css({"height": "40vh", "max-height": "100vh"});
// $(".header__search.search--home").css({"height": "12vh", "max-height": "100vh"});

Why don't you set the height before calling slideToggle()?

Inputing info in forms, then recalling it via jquery

I have a page with 3 divs that show one after another.
The first div shows three pictures, you choose which you like best by clicking the link below the picture, which also takes you to div 2.
Div 2 is a bunch of input boxes and a drop down selector. Once you fill out all the forms, click the next link which takes you to div 3.
Div 3 is a review of what you selected. It should show what picture you selected in div 1, and what you put in the text boxes / selector in div 2.
I have no idea how to go about doing this, and im really struggling, any and all help is appreciated.
JSFiddle - https://jsfiddle.net/7yuuz8d4/27/
/* JS - */
$(document).ready(function () {
$('#div1').show();
$('#div2').hide();
$('#div3').hide();
$('#div1').on('click', 'a', function (e) {
$('#div1').hide();
$('#div2').show();
});
$('#div2').on('click', 'a', function (e) {
$('#div2').hide();
$('#div3').show();
});
});
/*$(document).ready(function () {
$('#div1').on('click', 'a', function (e) {
var stylechoice = $(this).attr('value');
});
$("#height").prop(function(){
var height = $('#height').prop('value);
});
});
*/
/*$(document).ready(function () {
if(document.getElement
});
*/
/*if(document.getElementById('.col-md-4').clicked) {
$("#casual").show("#style1");
} else if {
$("#street").show("#style1");
} else if {
$("#classic").show("#style1");
});*/
<!-- Html -->
<!doctype html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<div class="container">
<div id="div1">
<h2>Pick your style</h2>
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="casual">Casual »</a>
</div><!--Closes Col-md-4-->
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="street">Street »</a>
</div><!--Closes Col-md-4-->
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="classic">Classic »</a>
</div><!--Closes Col-md-4-->
</div><!--Closes div1-->
<div id="div2">
<h3>Measurements</h3>
<h5>Measurements can be in inches or centimeters, just please notate which you use</h5>
<form>
Height:<br>
<input type="text" name="height" id="height"><br>
Neck:<br>
<input type="text" name="neck" id="neck"><br>
Arms:<br>
<input type="text" name="arms" id="arms"><br>
Waist:<br>
<input type="text" name="waist" id="waist"><br>
Legs:<br>
<input type="text" name="legs" id="legs"><br>
Shoes:<br>
<input type="text" name="shoes" id="shoes"><br>
Shirt size:<br>
<select>
<option value="small" id="small">Small</option>
<option value="medium" id="medium">Medium</option>
<option value="large" id="large">Large</option>
<option value="xlarge" id="xlarge">X-Large</option>
<option value="xxlarge" id="xxlarge">XX-Large</option>
</select>
</form>
<a class="btn btn-primary btn-lg" href="#div3" role="button">Next »</a>
</div><!--Closes div2-->
<div id="div3">
<h3>Review</h3>
<p>Here's the info you gave us, please double check it:</p>
<p>Style:</p>
<p>Height:</p>
<p>Neck:</p>
<p>Arms:</p>
<p>Waist:</p>
<p>Legs:</p>
<p>Shoes:</p>
<p>Shirt size:</p>
<p>Finally, any notes for our fashion aids?</p>
<textarea name="message" rows="10" cols="100">
Any other concerns you have we should know about? Do you have big thighs, long neck, big arms, etc. anything and anything that can help with the fitting of your clothing is extremely helpful!
</textarea>
<div id="display">
<a class="btn btn-primary btn-lg" href="success.html" role="button">Submit »</a>
</div>
</div><!--Closes div3-->
</div><!--Closes container-->
</body>
Note: I commented out what i have been trying to work on, and failing with. I have the div show/hide jquery working, im just putting it in here so that you know what i have so far, and that the solution anybody provides doesnt break that code in the meantime.

Hopefully this should get you started:
https://jsfiddle.net/xszmdx3a/
Create some empty tags in your third div to hold the content:
<p>Style:<span id="style-d3"></span></p>
<p>Height: <span id="height-d3"></span></p>
I added an extra class to your links in the first div:
<a class="btn btn-primary btn-lg picture-link" href="#div2" role="button" value="casual">Casual »</a>
And then add an event handler for the image:
$('.picture-link').click(function() {
var imgTag = $(this).parent().find('img')[0];
$(imgTag).clone().appendTo('#style-d3');
});
Similarly for the other fields:
$('#height').change(function() {
$('#height-d3').html($(this).val());
});

You can select the value of a textbox (and most other form controls) using the jQuery .val() function.
e.g. in your case:
var waistVal = $("#waist").val();
If you want to re-display the value elsewhere, then you could create an element, such as <div> or <span> to contain the value, and then inject the new value into it, e.g.:
<p>Waist:</p><span id="waistVal"></span>
So instead of the above jQuery script, you could instead write:
$("#waistVal").text($("#waist").val());
which will immediately show the value of the "waist" textbox inside the "waistVal" span. You can do the same for all the other textboxes and the dropdown.
Secondly, for the style links, it's probably more user-friendly to make the image itself clickable (and just have the words as labels only):
HTML in div1:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png" value="street">
Street
HTML in div3:
<p>Style:</p><span id="styleVal"></span><span id="styleImg"></span>
jQuery (inside the click event for the first set of hyperlinks):
$('#div1').on('click', 'img', function (e) {
//this will be populated, but invisible until div3 is displayed
$("#styleVal").text($(this).attr("value"));
$(this).clone().appendTo("#styleImg");
$("#div1").hide();
$"(#div2").show();
});

You can try this generic solution
$(document).ready(function () {
$('#div1').show();
$('#div2').hide();
$('#div3').hide();
var data = {
'div1': {},
'div2': {}
};
$('#div1').on('click', 'a', function (e) {
var imgTag = $(this).parent().find('img')[0];
data.div1.src = $(imgTag).attr('src');
$('#div1').hide();
$('#div2').show();
});
$('#div2').on('click', 'a', function (e) {
$(this).parent().find('form input, form select').each(function(){
data.div2[$(this).attr('name')] = $(this).val();
});
$('#div2').hide();
$('#div3').show();
setValues();
});
function setValues(){
$('#style-d3').append('<img src="' + data.div1.src + '">');
$.each(data.div2, function(key, val){
$('#' + key + '-d3').text(val);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div id="div1">
<h2>Pick your style</h2>
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg picture-link" href="#div2" role="button" value="casual">Casual »</a>
</div><!--Closes Col-md-4-->
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg picture-link" href="#div2" role="button" value="street">Street »</a>
</div><!--Closes Col-md-4-->
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg picture-link" href="#div2" role="button" value="classic">Classic »</a>
</div><!--Closes Col-md-4-->
</div><!--Closes div1-->
<div id="div2">
<h3>Measurements</h3>
<h5>Measurements can be in inches or centimeters, just please notate which you use</h5>
<form>
Height:<br>
<input type="text" name="height" id="height"><br>
Neck:<br>
<input type="text" name="neck" id="neck"><br>
Arms:<br>
<input type="text" name="arms" id="arms"><br>
Waist:<br>
<input type="text" name="waist" id="waist"><br>
Legs:<br>
<input type="text" name="legs" id="legs"><br>
Shoes:<br>
<input type="text" name="shoes" id="shoes"><br>
Shirt size:<br>
<select name="size">
<option value="small" id="small">Small</option>
<option value="medium" id="medium">Medium</option>
<option value="large" id="large">Large</option>
<option value="xlarge" id="xlarge">X-Large</option>
<option value="xxlarge" id="xxlarge">XX-Large</option>
</select>
</form>
<a class="btn btn-primary btn-lg" href="#div3" role="button">Next »</a>
</div><!--Closes div2-->
<div id="div3">
<h3>Review</h3>
<p>Here's the info you gave us, please double check it:</p>
<p>Style:<span id="style-d3"></span></p>
<p>Height: <span id="height-d3"></span></p>
<p>Neck: <span id="neck-d3"></span></p>
<p>Arms: <span id="arms-d3"></span></p>
<p>Waist: <span id="waist-d3"></span></p>
<p>Legs: <span id="legs-d3"></span></p>
<p>Shoes: <span id="shoes-d3"></span></p>
<p>Shirt size: <span id="size-d3"></span></p>
<p>Finally, any notes for our fashion aids?</p>
<textarea name="message" rows="10" cols="100">
Any other concerns you have we should know about? Do you have big thighs, long neck, big arms, etc. anything and anything that can help with the fitting of your clothing is extremely helpful!
</textarea>
<div id="display">
<a class="btn btn-primary btn-lg" href="success.html" role="button">Submit »</a>
</div>
</div><!--Closes div3-->
</div><!--Closes container-->
</body>

jQuery doesn't find existing element

I have the following problem I have a dropdown on my website. But because I wanted to add style to it, I hid it and have a bootsrap dropdown showing over it.
This is my html structure:
<div class="input-box">
<select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute- select selectpicker" style="display: none;">
<option value="">Maat_dames</option>
<option value="44" price="0">s</option>
<option value="43" price="0">m</option>
<option value="42" price="0">l</option>
<option value="41" price="0">xl</option>
<option value="40" price="0">2xl</option>
<option value="39" price="0">3xl</option>
<option value="38" price="0">4xl</option>
</select>
<!-- The normal dropdown -->
<!-- The bootstrap dropdown -->
<div class="btn-group bootstrap-select required-entry super-attribute-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
<span class="filter-option pull-left">Maat_dames</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-normalized-text="<span class="text">Maat_dames</span>">
<span class="text">Maat_dames</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
I'm trying to change the text Maat_dames to simply just Maat, I've tried the following jQuery code:
if(jQuery('span .filter-option').length == 0){console.log("fail")}
if(jQuery('span .filter-option.pull-left').length == 0){console.log("fail")}
if(jQuery('span .filter-option .pull-left').length == 0){console.log("fail")}
When I check the console log, it returns fail in all three cases, so the element isn't found. Why is that the case?
EDIT
All the answers suggest removing the space between span and .filter-option and while it doesn't work on my site, it does work when I try to run the code snippets in the comments en when I try to recreate it in a JSFiddle.
Could it be the case that jQuery can't find the element since it is dynamically created by a plugin?

You are using a descendant combinator (a space).
span .filter-option means any element that is a member of the class filter-option and has an ancestor that is a span.
The only elements which are members of that class in your document are spans themselves and do not have ancestors that are also spans.
Remove the spaces from the selectors.
if(jQuery('span.filter-option').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-box">
<select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute- select selectpicker" style="display: none;">
<option value="">Maat_dames</option>
<option value="44" price="0">s</option>
<option value="43" price="0">m</option>
<option value="42" price="0">l</option>
<option value="41" price="0">xl</option>
<option value="40" price="0">2xl</option>
<option value="39" price="0">3xl</option>
<option value="38" price="0">4xl</option>
</select>
<!-- The normal dropdown -->
<!-- The bootstrap dropdown -->
<div class="btn-group bootstrap-select required-entry super-attribute-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
<span class="filter-option pull-left">Maat_dames</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-normalized-text="<span class="text">Maat_dames</span>">
<span class="text">Maat_dames</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>

Replace jQuery('span .filter-option') with jQuery('span.filter-option').
Currently jQuery('span .filter-option') is finding element with class filter-oprion inside span tags in DOM.
When you write jQuery('span.filter-option') it will find span elements with class filter-option in DOM.

('span.filter-option').length maybe?

jQuery: Save a select element option that has been selected

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>
';
} ?>