Question

我需要为汽车零件网站创建一个品牌，型号和年份下拉列表，我希望程序的最终输出链接到新创建的URL以及来自下拉列表的输入。我有两个下拉列表工作，但我需要添加显示年份的第三个下拉列表。

此外，buildUrl函数会创建一个警报，用于构建一个可以访问我们网站内页面的网址。他们看起来像这样：

http://www.darspoilers.com/search?q=的讴歌 20％的 TLX 20％的 2015

我需要该功能链接到输入所选的品牌，型号和年份的网址（即网址的粗体部分）。

到目前为止，这是我的代码，大约只有一半的工作时间：

            <!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>

非常感谢任何反馈或想法。

谢谢，约旦

Answer 1

要以编程方式创建年份下拉菜单，您可以执行以下操作：

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
}

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

Answer 2

这是我的最终解决方案。我使用上面的答案中的点点滴滴以及其他一些方法来解决这个问题，只使用HTMl，CSS，JS和JQuery等前端语言。此下拉列表用于在我们现有的Squarespace电子商务设置中创建查询字符串，并且它们一起放在一个文件中，以便它可以放在Squarespace的代码块中。旁注，我不得不拿出很多品牌和型号来让它适合这里，所以请耐心等待。

如果您遇到动态下拉菜单问题，请随时编辑并使用它！我不得不拿出造型来适应，但主要组件在那里工作。

祝你好运，约旦

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

你如何使用javascript进行make，model，year的动态下拉菜单？

2 个答案: