javascript - 下拉选择器

Question

在我正在构建的车辆选择器方面寻求一些帮助，不幸的是，我对 JQuery 的掌握不是很好，所以不太确定如何完成后续步骤。目前它可以正常工作并且能够选择车辆并生成链接，但是该链接依赖于构成字符串的数据，即“http://www.web.com.au/store/vehicle-search/BMW-318i-2005”

我最终需要一种方法来为每个车辆选项分配一个 ID 号，以便链接看起来更像“http://www.web.com.au/store/vehicle-search/BMW/[UNIQUEID#]”，其中唯一 ID 是分配给每个车辆选择的编号，但根据链接我仍然想要保留车辆公司名称。

我最终会得到 200 个左右不同的 ID，因为每个品牌型号和年份都有很多组合。这可能吗？

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>

Answer 1

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

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

也请使用

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

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

和

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