Hey All,
Chasing a bit of help with a vehicle selector I am building, unfortunately I don’t have the greatest grasp of JQuery so not too sure how to pull off the next steps. At the moment it is functional and is able to select vehicles and produces a link however the link is reliant on the data that makes up the string i.e. “http://www.web.com.au/store/vehicle-search/BMW-318i-2005”
I ultimately need a way to assign each vehicle option with an ID number so that the link looks more like “http://www.web.com.au/store/vehicle-search/BMW/[UNIQUEID#]” where unique ID is the number assigned to each vehicle selection. Is this possible?
HTML:
<style>
ul {
list-style: none;
}
</style>
<div class="dynamic-dropdown">
<form name="myform" id="myForm">
<h3 id="dropdown-h3">Quick Search</h3>
<ul>
<li>
<select name="optone" id="makeSel" size="1">
<option value="" selected="selected">Select make</option>
</select>
</li>
<li>
<select name="opttwo" id="modelSel" size="1">
<option value="" selected="selected">Select model</option>
</select>
</li>
<li>
<select name="optthree" id="yearSel" size="1">
<option value="" selected="selected">Select year</option>
</select>
</li>
<a href="javascript:window.location.assign(buildUrl());"><img src="http://media.supercheapauto.com.au/sca/images/user/media/sca/garage/Parts-2.png"/></a>
</ul>
</form>
</div>
<script src=".\selector.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Javascript:
var makeObject = {
"BMW": {
"318i": ["2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998"],
},
"Daewoo": {
"Lanos": ["2003", "2002", "2001", "2000", "1999", "1998", "1997"],
},
"Ford": {
"Courier PC-PD": ["1999", "1998", "1997", "1996", "1995", "1994", "1993", "1992", "1991"],
"Courier PE-PG-PH Petrol": ["2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997"],
"Courier PE-PG-PH Diesel": ["2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997"],
"Falcon EF": ["1996", "1995", "1994"],
"Falcon EL": ["1998", "1997", "1996"],
"Falcon AU1": ["2000", "1999", "1998"],
"Falcon AU2": ["2002", "2001", "2000"],
"Falcon AU3": ["2002", "2001"],
"Falcon BA-6": ["2005", "2004", "2003", "2002"],
"Falcon BA-8": ["2005", "2004", "2003", "2002"],
"Falcon BF": ["2011", "2010", "2009", "2008", "2007", "2006", "2005"],
"Falcon FG": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008"],
},
"Holden": {
"Commodore": ["2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"],
"Commodore2": ["2010", "2009", "2008", "2007", "2006", "2005"]
},
"Honda": {
"Accord": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995", "1996", "1995", "1994"],
},
"Hyundai": {
"Accent": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
},
"Isuzu": {
"D-Max": ["2002", "2001", "2000", "1999"],
},
"Kia": {
"Optima": ["2017", "2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001"],
"Rio": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"]
},
"Lexus": {
"IS250": ["2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"]
},
"Mazda": {
"Mazda 3": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004"]
},
"Mitsubishi": {
"Lancer": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008"]
},
"Nissan": {
"350Z": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"]
},
"Peugeot": {
"350Z": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"]
},
"Subaru": {
"350Z": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"],
"350Z Coupe": ["2008", "2007", "2006", "2005", "2004", "2003"],
"350Z Roadster": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"],
"370Z": ["2016","2015", "2014", "2013", "2012", "2011", "2010"],
"370Z Coupe": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009"],
"370Z Roadster": ["2016","2015", "2014", "2013", "2012", "2011", "2010"]
},
"Suzuki": {
"350Z": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"],
"350Z Coupe": ["2008", "2007", "2006", "2005", "2004", "2003"],
"350Z Roadster": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"],
"370Z": ["2016","2015", "2014", "2013", "2012", "2011", "2010"],
"370Z Coupe": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009"],
"370Z Roadster": ["2016","2015", "2014", "2013", "2012", "2011", "2010"]
},
"Toyota": {
"350Z": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"],
"350Z Coupe": ["2008", "2007", "2006", "2005", "2004", "2003"],
"350Z Roadster": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"],
"370Z": ["2016","2015", "2014", "2013", "2012", "2011", "2010"],
"370Z Coupe": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009"],
"370Z Roadster": ["2016","2015", "2014", "2013", "2012", "2011", "2010"]
},
"Alfa-Romeo": {
"350Z": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"],
"350Z": ["2008", "2007", "2006", "2005", "2004", "2003"],
"350Z": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"],
"370Z": ["2016","2015", "2014", "2013", "2012", "2011", "2010"],
"370Z": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009"],
"370Z": ["2016","2015", "2014", "2013", "2012", "2011", "2010"]
}
}
window.onload = function() {
var makeSel = document.getElementById("makeSel"),
modelSel = document.getElementById("modelSel"),
yearSel = document.getElementById("yearSel");
for (var make in makeObject) {
makeSel.options[makeSel.options.length] = new Option(make, make);
}
makeSel.onchange = function() {
modelSel.length = 1; // remove all options bar first
yearSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var model in makeObject[this.value]) {
modelSel.options[modelSel.options.length] = new Option(model, model);
}
}
makeSel.onchange(); // reset in case page is reloaded
modelSel.onchange = function() {
yearSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var years = makeObject[makeSel.value][this.value];
for (var i = 0; i < years.length; i++) {
yearSel.options[yearSel.options.length] = new Option(years[i], years[i]);
}
}
}
function buildUrl() {
var url = "http://www.web.com.au";
var make = document.querySelector('#makeSel').value;
var model = document.querySelector('#modelSel').value;
var year = document.querySelector('#yearSel').value;
var qs = encodeURIComponent(make + '-' + model + '-' + year);
if (qs.length > 0) {
url = url + "/store/vehicle-search/" + qs;
}
return url;
}