堆栈内存溢出
  简体   繁体   English

如何使用javascript使用品牌，型号和年份进行动态下拉菜单？

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

 原文  2016-04-29 16:26:06  4   2    javascript/ jquery/ html/ drop-down-menu/ cascadingdropdown

问题描述

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. 我需要为汽车配件站点创建品牌，型号和年份下拉列表，并且我希望程序的最终输出可以使用下拉列表的输入链接到新创建的URL。 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. 另外，buildUrl函数会创建一个警报，该警报将构建一个将访问我们网站内页面的URL。 They look something like this: 他们看起来像这样：

http://www.darspoilers.com/search?q= acura %20 tlx %20 2015 http://www.darspoilers.com/search?q= ac 歌 ％20 tlx ％20 2015

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 谢谢乔丹

2 个解决方案

解决方案1
 0  2016-04-29 17:12:34

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: 然后，要构建查询字符串，您所需要做的就是获取所需的值并将它们附加到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;

解决方案2
 0  2016-05-12 16:07:45

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. 我使用了以上答案中的点点滴滴以及其他一些方法，仅使用HTMl，CSS，JS和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. 此下拉列表用于在我们现有的Squarespace电子商务设置中创建查询字符串，并将它们一起放在一个文件中，以便可以将其放置在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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用动态javascript下拉菜单进行MVC编辑 - How to do an MVC Edit with a dynamic javascript dropdown 动态下拉列表 - 年份、品牌、型号 - 将最终选择链接到特定页面 - Dynamic Dropdown - Year, Make, Model - Link final selection to a specific page 如何用Javascript制作闪烁的动画？ - How do you make a blinking animation in Javascript? 如何在JavaScript中制作背景数组 - How do you make a background Array in javascript 你如何用JavaScript制作课程？ - How do you make classes in JavaScript? 您如何同时使用“ and”和“ or”制作javascript“ if”语句？ - How do you make a javascript “if” statement with both “and” and “or”? 如何通过带有引导程序下拉列表的JavaScript过滤表？ - How do you filter table via JavaScript with a bootstrap dropdown? 你如何使 jest.mock(file) 动态化？ - How do you make jest.mock(file) dynamic? 如何使硬编码对象动态化 - How do you make a hard coded object dynamic 如何在PHP中动态进行json-rpc调用？ - How do you make json-rpc calls in PHP dynamic?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM