How do you do a dynamic dropdown with make, model, year with javascript?

Question

I need to create a make, model, and year dropdown for an auto parts site and I want the final output of the program to link to a newly created url with the inputs from the dropdowns. I have two of the dropdowns working, but I need to add a third dropdown that displays the years.

Also, the buildUrl function creates an alert that builds a url that will reach pages within our site. They look something like this:

http://www.darspoilers.com/search?q=acura%20tlx%202015

I need that function to link to a url that inputs the make, model, and year that were selected (ie the bold parts of the url).

Here's my code so far and it is about half way working:

            <!DOCTYPE html>
            <html>
            <head>
            <script>
            function populate(s1,s2){
                var s1 = document.getElementById(s1);
                var s2 = document.getElementById(s2);
                s2.innerHTML = "";
                if(s1.value == "Acura"){
                    var optionArray = ["|","ilx|ILX","integra|Integra","integra type r|Integra Type R","rl|RL","rsx|RSX","tlx|TLX","tl|TL","tsx|TSX"];
                } else if(s1.value == "Audi"){
                    var optionArray = ["|","a4|A4","a6|A6"];
                } else if(s1.value == "BMW"){
                    var optionArray = ["|","3 series 2dr|3 Series 2DR","3 series 4dr|3 Series 4DR","318ti|318TI","5 series|5 Series","z4|Z4"];
                } else if(s1.value == "Buick"){
                    var optionArray = ["|","century|Century","lacrosse|Lacrosse", "lucerne|Lucerne","regal|Regal"];
                } else if(s1.value == "Cadillac"){
                    var optionArray = ["|","ats 4dr|ATS 4DR","cts 2dr|CTS 2DR","cts 4dr|CTS 4DR","catera|Catera","escalade|Escalade","deville|Deville","el dorado|El Dorado","escalade esv|Escalade ESV","seville sts|Seville STS"];
                } else if(s1.value == "Chevrolet"){
                    var optionArray = ["|","aveo 4dr|Aveo 4DR","aveo 5dr|Aveo 5DR","beretta|Beretta","silverado|Silverado","c1500|C1500","camaro|Camaro","cavalier z24|Cavalier Z24","cobalt 2dr|Cobalt 2DR","cobalt 4dr|Cobalt 4DR","corvette c5|Corvette C5","corvette c6|Corvette C6","corvette c7|Corvette C7","cruze|Cruze","hhr|HHR","impala|Impala","malibu|Malibu","prizm|Prizm","ssr|SSR","suburban/tahoe|Suburban/Tahoe","trailblazer|Trailblazer"];
                } else if(s1.value == "Chrysler"){
                    var optionArray = ["|","200|200","300|300","300m|300M","aspen|Aspen","concorde|Concorde","pt cruiser|PT Cruiser","sebring|Sebring","town & country|Town & Country"];
                }
                for(var option in optionArray){
                    var pair = optionArray[option].split("|");
                    var newOption = document.createElement("option");
                    newOption.value = pair[0];
                    newOption.innerHTML = pair[1];
                    s2.options.add(newOption);
                }

             }

            function buildUrl(url, parameters){
              var qs = "";
              for(var key in parameters) {
                var value = parameters[key];
                qs += encodeURIComponent(value) + "%20";
              }
              if (qs.length > 0){
                qs = qs.substring(0, qs.length-3 ); //chop off last "&"
                url = url + "search?q=" + qs;
              }
              return url;
            }

            //example:
            var url = "http://www.darspoilers.com/";
            var parameters = new Array();
            parameters[0] = "acura";
            parameters[1] = "tsx";



            </script>
            </head>
            <body>
            <h2>Choose Your Car</h2>
            <hr />
            Choose Car Make:
            <select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
              <option value=""></option>
              <option value="Acura">Acura</option>
              <option value="Audi">Audi</option>
              <option value="BMW">BMW</option>
              <option value="Buick">Buick</option>
              <option value="Cadillac">Cadillac</option>
              <option value="Chevrolet">Chevrolet</option>
              <option value="Chrysler">Chrysler</option>
            </select>
            <hr />
            Choose Car Model:
            <select id="slct2" name="slct2" onchange="alert(buildUrl(url,parameters))"></select>
            <hr />
            </body>
            </html>

Any feedback or ideas would be greatly appreciated.

Thanks, Jordan

score 1 · Answer 1 · edited Nov 01 '18 at 10:11

Here is my final solution. I used bits and pieces from the answers above as well as some other methods to solve this problem using only front end languages like HTMl, CSS, JS and JQuery. This dropdown is made to create Query strings within our existing Squarespace eCommerce setup and is all together in one file so that it can be placed within a code block on Squarespace. Side note, I had to take out a lot of the makes and the models to get it to fit on here so bear with me on that.

If you have had problems with dynamic dropdowns, feel free to edit and use this as you please! I had to take out the styling to fit, but the main components are there and working.

Best regards, Jordan

<script>

var makeObject = {
  "Acura": {
    "ILX": ["2015", "2014", "2013"],
    "Integra": ["2001", "2000", "1999", "1998", "1997", "1996", "1995", "1994"],
    "RL": ["2008", "2007", "2006", "2005"],
    "RSX": ["2006", "2005", "2004", "2003", "2002"],
    "TL": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999"],
    "TLX": ["2016", "2015"],
    "TSX": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"]
  },
  "Audi": {
    "A4": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002"],
    "A6": ["2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997", "1996"]
  },
  "BMW": {
    "3-Series 2DR": ["2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000"],
    "3-Series 4DR": ["2011", "2010", "2009", "2008", "2007", "2006"],
    "318TI": ["1998", "1997", "1996", "1995"],
    "5-Series": ["2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999"],
    "Z4": ["2008", "2007", "2006", "2005", "2004", "2003", "2002"]
  },
  "Buick": {
    "Century": ["2004", "2003", "2002", "2001", "2000", "1999", "1998"],
    "Lacrosse": ["2013", "2012", "2011", "2010"],
    "Lucerne": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Regal": ["2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997"]
  },
  "Cadillac": {
    "ATS": ["2015", "2014", "2013"],
    "CTS Coupe": ["2015", "2014", "2013", "2012", "2011","2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "CTS Sedan": ["2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "Catera": ["2002", "2001", "2000", "1999", "1998", "1997"],
    "Deville DTS": ["2011", "2010", "2009", "2008", "2007", "2006"],
    "El Dorado": ["2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995", "1994", "1993", "1992"],
    "Escalade": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2004", "2003", "2002"],
    "STS": ["2011","2010", "2009", "2008", "2007", "2006", "2005"]
  },
  "Chevrolet": {
    "Aveo": ["2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004"],
    "Beretta": ["1995", "1994", "1993", "1992", "1991", "1990", "1989"],
    "C1500": ["2006", "2005", "2004", "2003"],
    "Camaro": ["2016", "2015", "2014","2013", "2012", "2011", "2010", "2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995", "1994", "1993"],
    "Camaro Z28": ["2016", "2015", "2014", "2013", "2012", "2011", "2010"],
    "Cavalier Z24": ["2002", "2001", "2000"],
    "Cobalt 2DR": ["2010", "2009", "2008", "2007", "2006", "2005"],
    "Cobalt 4DR": ["2010", "2009", "2008", "2007", "2006", "2005"],
    "Corvette C5": ["2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997"],
    "Corvette C6": ["2013", "2012", "2011","2010", "2009", "2008", "2007", "2006", "2005"],
    "Corvette C7": ["2016", "2015", "2014"],
    "Cruze": ["2015", "2014", "2013", "2012", "2011"],
    "Equinox": ["2013", "2012", "2011", "2010"],
    "HHR": ["2011", "2010", "2009", "2008", "2007", "2006"],
    "Impala": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000"],
    "Malibu": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004"],
    "Malibu Maxx": ["2007", "2006", "2005", "2004"],
    "Prizm": ["2002", "2001", "2000", "1999", "1998"],
    "SSR": ["2006", "2005", "2004"],
    "Silverado": ["2013", "2012", "2011", "2010", "2009", "2008", "2007"],
    "Suburban": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "1999", "1998", "1997", "1996", "1995", "1994"],
    "Tahoe": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007"],
    "Trailblazer": ["2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002"]
  },
  "Chrysler": {
    "200": ["2016", "2015", "2014", "2013", "2012", "2011"],
    "300": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005"],
    "300M": ["2004", "2003", "2002", "2001", "2000", "1999"],
    "Aspen": ["2009", "2008", "2007", "2006"],
    "Concorde": ["1997", "1996", "1995", "1994", "1993"],
    "PT Cruiser": ["2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001"],
    "Sebring": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995"],
    "Town and Country": ["2007", "2006", "2005", "2004", "2003", "2002", "2001"]
  },
  "Dodge": {
    "Avenger": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "1996", "1995"],
    "Caliber": ["2011", "2010", "2009", "2008", "2007", "2006"],
    "Caravan": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001"],
    "Challenger": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008"],
    "Charger": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Charger 500": ["2010", "2009", "2008", "2007", "2006"],
    "Charger Daytona": ["2010", "2009", "2008", "2007", "2006"],
    "Dart": ["2015", "2014", "2013"],
    "Durango": ["2010", "2009", "2008", "2007", "2006", "2005", "2004"],
    "Intrepid": ["2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995", "1994", "1993"],
    "Neon": ["2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995", "1994"],
    "Nitro": ["2011", "2010", "2009", "2008", "2007"],
    "Ram": ["2015", "2014", "2008", "2007", "2006", "2005", "2004", "2003", "2002"],
    "Stratus": ["2005", "2004", "2003", "2002", "2001"]
  },
  "Fiat": {
    "500": ["2015", "2014", "2013", "2012"]
  },
  "Ford": {
    "Five Hundred": ["2007", "2006", "2005"],
    "Contour": ["2001", "2000", "1999", "1998"],
    "Crown Victoria": ["2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998"],
    "Escape": ["2012", "2011", "2010", "2009", "2008"],
    "Expedition": ["2001", "2000", "1999", "1998", "1997"],
    "Explorer": ["2007", "2006", "2005", "2004", "2003", "2002"],
    "Flex": ["2015", "2014", "2013", "2012", "2011", "2010", "2009"],
    "F-150": ["2008", "2007", "2006", "2005", "2004"],
    "Fiesta": ["2015", "2014", "2013", "2012", "2011"],
    "Focus": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000"],
    "Fusion": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "F-150 Lightning": ["2004", "2003", "2002", "2001", "2000", "1999"],
    "Mustang": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005"],
    "Mustang GT": ["2004", "2003", "2002", "2001", "2000", "1999"],
    "Mustang GT350R": ["2016", "2015"],
    "Mustang GT500": ["2009", "2008", "2007", "2006", "2005"],
    "Taurus": ["2012", "2011", "2010", "2009", "2008"],
    "Thunderbird": ["1997", "1996", "1995", "1996", "1995", "1994", "1993", "1992", "1991", "1990", "1989"]
  },
  "GMC": {
    "Denali": ["1999", "1998", "1997", "1996", "1995", "1996", "1995", "1994"],
    "Envoy": ["2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002"],
    "Sierra": ["2013", "2012", "2011", "2010", "2009", "2008", "2007"],
    "Tahoe": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2005", "2004", "2003", "2002"],
    "Yukon": ["2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2005", "2004", "2003", "2002", "1999", "1998", "1997", "1996", "1995", "1996", "1995", "1994"]
  },
  "Honda": {
    "Accord 2DR": ["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"],
    "Accord 4DR": ["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"],
    "CRV": ["2011", "2010", "2009", "2008", "2007"],
    "Civic 2DR": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995", "1996"],
    "Civic 4DR": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995", "1996"],
    "Del Sol": ["1997", "1996", "1995", "1996", "1995", "1994", "1993"],
    "Element": ["2011", "2010", "2009", "2008", "2007", "2005", "2004", "2003"],
    "S2000": ["2007", "2005", "2004", "2003", "2002", "2001", "2000"]
  },
  "Hummer": {
    "H2": ["2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "H3": ["2010", "2009", "2008", "2007", "2006", "2005"]
  },
  "Hyundai": {
    "Accent": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Azera": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Elantra": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2006", "2005", "2004"],
    "Elantra Touring": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009"],
    "Genesis 2DR": ["2016", "2015", "2014", "2013", "2012", "2011", "2010"],
    "Genesis 4DR": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009"],
    "Genesis Hood Scoop": ["2014", "2013", "2012", "2011", "2010", "2009"],
    "Santa Fe": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001"],
    "Sonata": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Tiburon": ["2002", "2001", "2000"],
    "Tiburon GT-V6": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "Tucson": ["2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005"]
  },
  "Infiniti": {
    "G20": ["2002", "2001", "2000", "1999"],
    "G35 2DR": ["2007", "2006", "2005", "2004", "2003"],
    "G35 4DR": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "G37 2DR": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008"],
    "G37 4DR": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007"],
    "G37 Side Scoops": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008"],
    "M35": ["2010", "2009", "2008", "2007", "2006"],
    "M37": ["2016", "2015", "2014", "2013", "2012", "2011"],
    "M45": ["2010", "2009", "2008", "2007", "2006"],
    "Q50": ["2016","2015", "2014"],
    "Q70": ["2016", "2015"],
    "QX56": ["2010", "2009", "2008", "2007", "2006", "2005", "2004"],
    "I30": ["2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995", "1996"],
    "I35": ["2004", "2003", "2002", "2001", "2000"]
  },
  "Jaguar": {
    "S-Type R": ["2004", "2003", "2002", "2001", "2000"],
    "XF": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009"]
  },
  "Jeep": {
    "Grand Cherokee": ["2010", "2009", "2008", "2007", "2006", "2005"],
    "Liberty": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007"],
    "Patriot": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007"]
  },
  "Kia": {
    "Amanti": ["2009", "2008", "2007", "2006", "2005", "2004"],
    "Cadenza": ["2016","2015", "2014"],
    "Forte Koup": ["2016","2015", "2014", "2013", "2012", "2011", "2010"],
    "Forte Koup-R": ["2013", "2012", "2011", "2010"],
    "Forte Sedan": ["2016","2015", "2014", "2013", "2012", "2011", "2010"],
    "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"],
    "Rondo": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007"],
    "Sedona": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002"],
    "Soul": ["2016","2015", "2014", "2013", "2012", "2011", "2010"],
    "Sorento": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "Spectra": ["2009", "2008", "2007", "2006", "2005", "2004"],
    "Sportage": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005"]
  },
  "Land Rover": {
    "Range Rover": ["2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005"],
    "Range Rover Sport": ["2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"]
  },
  "Lexus": {
    "ES": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002"],
    "GS": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "GS300": ["2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998"],
    "GS400": ["2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998"],
    "GX470": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "IS": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "IS250": ["2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "IS300": ["2005", "2004", "2003", "2002", "2001"],
    "LS460": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007"],
    "LX470": ["2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999"],
    "RC": ["2015"],
    "RX300": ["2003", "2002", "2001", "2000", "1999"]
  },
  "Lincoln": {
    "Continental": ["1997", "1996", "1995"],
    "LS": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000"],
    "MKS": ["2014", "2013", "2012", "2011", "2010"],
    "MKZ": ["2016", "2015", "2014", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Navigator": ["2001", "2000", "1999", "1998", "1997"],
    "Navigator Hood Scoop": ["2010", "2009", "2008", "2007"],
    "Zephyr": ["2012", "2011", "2010", "2009", "2008", "2007", "2006"]
  },
  "Mazda": {
    "CX-7": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007"],
    "MPV": ["2005", "2004", "2003", "2002", "2001", "2000"],
    "Mazda 3": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004"],
    "Mazda 5 Hatchback": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Mazda 6": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "Mazda 626": ["2002", "2001", "2000", "1999", "1998"],
    "Miata MX-5": ["2017", "2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Protege MP3": ["2003", "2002", "2001", "2000", "1999"],
    "RX-8": ["2008", "2007", "2006", "2005", "2004"],
    "Tribute": ["2012", "2011", "2010", "2009", "2008"]
  },
  "Mercedes": {
    "C-Class C55": ["2007", "2006", "2005", "2004", "2003", "2002", "2001"],
    "C-Class Coupe": ["2016","2015", "2014", "2013", "2012"],
    "C-Class Sedan": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008"],
    "CL": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008"],
    "CLA": ["2016","2015", "2014"],
    "CLK": ["2002", "2001", "2000", "1999"],
    "CLK55": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "CLS": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "E-Class": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "E-Class Convertible": ["2016","2015", "2014", "2013", "2012", "2011", "2010"],
    "E-Class Coupe": ["2016","2015", "2014", "2013", "2012", "2011", "2010"],
    "E-Class E63": ["2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "E-Class Sedan": ["2016","2015", "2014", "2013", "2012", "2011", "2010"],
    "GL": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007"],
    "ML": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "ML320": ["2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998"],
    "ML430": ["2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998"],
    "ML500": ["2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998"],
    "S-Class": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007"],
    "SL63": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "SLK": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005"]
  },
  "Mercury": {
    "Cougar": ["2003", "2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995", "1994", "1993", "1992", "1991", "1990", "1989"],
    "Grand Marquis": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003"],
    "Marauder": ["2005", "2004", "2003"],
    "Mariner": ["2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005"],
    "Milan": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Montego": ["2007", "2006", "2005"],
    "Mountaineer": ["2007", "2006", "2005", "2004", "2003", "2002"],
    "Mystique": ["2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995"],
    "Sable": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2006", "2005", "2004", "2003", "2002", "2001", "2000"]
  },
  "Mitsubishi": {
    "Diamante": ["2004", "2003", "2002", "1996", "1995", "1994", "1993"],
    "Eclipse": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995"],
    "Eclipse Coupe": ["2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Eclipse Coupe SS": ["2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Galant": ["2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995", "1994"],
    "Lancer": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008"],
    "Lancer Ralliart": ["2007", "2006", "2005", "2004"],
    "Montero": ["2006", "2005", "2004", "2003", "2002", "2001"]
  },
  "Nissan": {
    "300ZX": [ "1997", "1996", "1995", "1994", "1993", "1992", "1991", "1990"],
    "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"],
    "Altima": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2006", "2005", "2004", "2003", "2002"],
    "Altima Coupe": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008"],
    "Altima SE-R": ["2006", "2005", "2004", "2003", "2002"],
    "Altima Sedan": ["2017","2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007"],
    "Armada": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004"],
    "Cube": ["2016","2015", "2014", "2013", "2012", "2011", "2010"],
    "Juke": ["2016","2015", "2014", "2013", "2012", "2011"],
    "Maxima": ["2017","2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000"],
    "Pathfinder": ["2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005"],
    "Rogue": ["2013", "2012", "2011", "2010", "2009", "2008"],
    "Rogue Select": ["2016","2015", "2014"],
    "Sentra": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000","1994", "1993", "1992", "1991"],
    "Sentra SE-R": ["2012", "2011", "2010", "2009", "2008", "2007"],
    "Versa": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Versa Hatchback": ["2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006"],
    "Versa Note": ["2016","2015", "2014"],
    "Xterra": ["2016","2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000"]
  }
}


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.darspoilers.com/";
  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 + "search?q=" + qs;
  }
  return url;
}

</script>

<div class="dynamic-dropdown">
  <center>
    <form name="myform" id="myForm">
      <h3 id="dropdown-h3">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://i40.photobucket.com/albums/e218/Jordan_Imhoff/search-12-xxl_zpsxpsu2fmp.png"/></a>

      </ul>
    </form>
  </center>
</div>
<hr/>

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

score 0 · Answer 2 · answered Apr 29 '16 at 17:12

To create a drop down for year programmatically you could do something like this:

var s3 = document.querySelector('#slct3');                      // grab the select element
for(var i = new Date().getFullYear(), l = 1950; i > l; i--) {   // loop from this year until 1951
    var no = document.createElement('option');                  // create option element
    no.value = i;                                               // set the value to i, the year
    no.innerHTML = i; 
    s3.appendChild(no);                                         // append it to the select
}

Then to build your query string all you need to do is grab the values needed and append them to the URL:

var url = "http://www.darspoilers.com/";
var make = document.querySelector('#slct1').value;
var model = document.querySelector('#slct2').value;
var year = document.querySelector('#slct3').value;
var qs = encodeURIComponent(make + ' ' + model + ' ' + year);
if (qs.length > 0) {
    url = url + "search?q=" + qs;
}
return url;

The query string works! Now, I just need to be able to link to that query string instead of just calling alert with it. Do you have any feedback on how I could link to the url that is generated? — Jordan Imhoff, Apr 29 '16 at 21:18
If you mean to re-direct to the generated URL, see the answer to http://stackoverflow.com/questions/503093/how-can-i-make-a-page-redirect-using-jquery?rq=1 — spaceman, Apr 29 '16 at 23:44

How do you do a dynamic dropdown with make, model, year with javascript?

2 Answers2