Drop Down Selector

Question

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, but as per the link I would still like to keep the vehicle company name.

I would end up with 200 or so different ID's as there are a lot of combinations for each make model and year. Is this possible?

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

ul {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<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="/garage/Parts-2.png" /></a>
    </ul>
  </form>
</div>

_"but as per the link I would still like to keep the vehicle company name"_ - well then the “translation” of `BMW-318i-2005` from the link to whatever associated id would have to happen in the script that gets called by this link. — CBroe, Jun 14 '17 at 09:43
Also please do `$(function() { $("#buildURLLink").on("click",function(e) { e.preventDefault(); location = buildUrl(); });` and give the link an ID of buildURLLink instead of a horrible javascript href — mplungjan, Jun 14 '17 at 09:48
If the id does not need to be secure, you could generate a hash key from the combined selected options and add that as the unique id in the URL. There is an example in the post https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript-jquey — Neil Hibbert, Jun 14 '17 at 09:54
Hey Guys, thanks for the replies, I think I may have described this wrong in the first place, basically the ID is pre-existing and just makes up the URL for each vehicle link; For example the link for BMW 318i would be the below as I already have each ID for each type of vehicle ready to go. "http://www.web.com.au/store/vehicle-search/BMW/5014521" — Yash, Jun 14 '17 at 10:53

score 1 · Accepted Answer · answered Jun 14 '17 at 11:17

var lookUpID = { "BMW-318i-2005":"5014521", "BMW-318i-2004":"5014520", ...}

var qs = make+"/" + lookupID[make + '-' + model + '-' + year];

also please use

window.onload = function() {
  var makeSel = document.getElementById("makeSel"),
  ...;

  document.querySelector("#buildURLLink").onclick=function(e) { 
    e.preventDefault(); 
    location = buildUrl(); 
  }  
}

and

 <a href="turnonjavascript.html" id="buildURLLink"><img src="/garage/Parts-2.png" /></a>

Thank-you for your reply! This solved my issue, really appreciate it! :) — Yash, Jun 15 '17 at 00:46

Drop Down Selector

1 Answers1