javascript - 动态下拉菜单-年，品牌，型号-将最终选择链接到特定页面(Dynamic Dropdown - Year, Make, Model - Link final selection to a specific page)

Question

I am attempting to make a year/make/model lookup for an ecommerce website that uses 3dcart as an engine.

(我正在尝试为使用3dcart作为引擎的电子商务网站进行年份/品牌/型号查找。)

Unfortunately, 3dcart does not have a module or simple solution, so I have to create this from scratch.

(不幸的是，3dcart没有模块或简单的解决方案，因此我必须从头开始创建它。)

I found a basic solution for the Year, Make, Model lookup on this site, but the URL that is produced is built from the selections.

(我在该站点上找到了“年份，型号，型号”查找的基本解决方案，但是生成的URL是根据选择构建的。)

This will not work for my needs.

(这将无法满足我的需求。)

I need to be able to link the final selection to a specific url of my choosing.

(我需要能够将最终选择链接到我选择的特定网址。)

For instance, if you were to choose "Lincoln" on the first drop down, then "Continental" on the second, then "1995" on the last, I would need the button to link to a specific url (www.autoparts.com/23cd3d2d2.html) and not one that was built from the selections.

(例如，如果您要在第一个下拉列表中选择“林肯”，然后在第二个下拉列表中选择“ Continental”，然后在最后一个下拉列表中选择“ 1995”，则需要该按钮链接到特定的网址（www.autoparts.com /23cd3d2d2.html），而不是根据选择内容构建的一个。)

I have to do it this way because I am essentially creating a landing page that will have subcategories depending on the selection and those category pages are given an arbitrary URL that I cannot control.

(我必须这样做，因为我实际上是在创建一个登录页面，该页面将根据选择具有子类别，并且为这些类别页面提供了我无法控制的任意URL。)

Also, there will only be roughly 30 of these category pages, so the same link will be used more than once.

(同样，这些类别页面中大约只有30个，因此同一链接将被多次使用。)

So, essentially, once all choices are made, there would be a button that would take you to the URL that I have designated in advance based on those choices.

(因此，从本质上讲，一旦做出所有选择，就会有一个按钮，它将带您到我根据这些选择预先指定的URL。)

Here is the current code, which does not yet do what I need:

(这是当前的代码，尚未执行我需要的操作：)

<script>

var makeObject = {
  "Acura": {
    "ILX": ["2015", "2014", "2013"],
     },

}

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 = "/";
  var make = document.querySelector('#makeSel').value;
  var model = document.querySelector('#modelSel').value;
  var year = document.querySelector('#yearSel').value;
  var qs = encodeURIComponent(make + ' ' + model + ' ' + year);
  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());">GO</a>

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

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

  ask by Kevin Dellea translate from so