Question

我正在尝试为使用3dcart作为引擎的电子商务网站进行一年/制作/模型查找。不幸的是，3dcart没有模块或简单的解决方案，所以我必须从头开始创建它。

我在此网站上找到了Year，Make，Model查找的基本解决方案，但生成的URL是根据选择构建的。这不适合我的需要。我需要能够将最终选择链接到我选择的特定网址。

例如，如果你选择＆＃34;林肯＆＃34;在第一次下拉，然后＆＃34;大陆＆＃34;在第二个，那么＆＃34; 1995＆＃34;最后，我需要按钮链接到特定的URL（www.autoparts.com/23cd3d2d2.html），而不是从选择中构建的按钮。我必须这样做，因为我实际上创建的登录页面将根据选择具有子类别，并且这些类别页面被赋予我无法控制的任意URL。此外，这些类别页面中只有大约30个，因此相同的链接将被多次使用。所以，基本上，一旦做出所有选择，就会有一个按钮，可以根据这些选择将您带到我事先指定的URL。

这是当前的代码，它还没有做我需要的：

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

Answer 1

3Dcart不提供这种功能，但是我们可以使用ajax和jQuery进行构建。首先，需要根据过滤器排列类别层次结构，然后使用ajax和jQuery，我们可以在3Dcart中构建这种过滤器。

动态下拉菜单 - 年份，制作，模型 - 将最终选择链接到特定页面

1 个答案: