Question

我正在使用这个链式插件。 http://www.appelsiini.net/projects/chained

我正在Shopify平台上的tirerack.com上复制这个车辆搜索框。

这是我的设置。

＆＃13;

<script>
  
  function submitAction(formObj) {
      var root  = formObj.action;
      var type  = formObj.elements['type'].value;
      var make  = formObj.elements['make'].value;
      var year  = formObj.elements['year'].value;
      var model = formObj.elements['model'].value.replace(/[\. ,:-]+/g, "-");

      var href = root + type + '/' + make + '+' + year + '+' + model;
      window.location.href = href;
      return false;
    }

</script>
<script>
  
  jQuery(document).ready(function($){
    /* For jquery.chained.js */
    $("#year").chained("#make");
    $("#model").chained("#year");

  });
</script>

＆＃13;

<form id="w-form" action="/collections/" method="get" onsubmit="return submitAction(this);">

    <select id="make" name="make" required>
      <option value="">Select Make</option>
      <option value="acura">Acura</option>
      <option value="alfa-romeo">Alfa Romeo</option>
      <option value="american-motors">American Motors</option>
      <option value="aston-martin">Aston Martin</option>
      <option value="audi">Audi</option>
      <option value="bmw">BMW</option>
    </select>
    <select id="year" name="year" required>
      <option value="">Select Year</option>
      <option value="2017 acura" class="acura">2017</option>
      <option value="2016 acura" class="acura">2016</option>
      <option value="2015 acura" class="acura">2015</option>
      <option value="2014 acura" class="acura">2014</option>

      <option value="1974 alfa-romeo" class="alfa-romeo">1974</option>
      <option value="1973 alfa-romeo" class="alfa-romeo">1973</option>
    </select>
    <select id="model" name="model" required>
      <option value="">Select Model</option>
      <option value="ILX"                   class="2016 acura">ILX</option>
      <option value="ILX A-SPEC Package"    class="2016 acura">ILX A-SPEC Package</option>
      <option value="MDX-FWD"               class="2016 acura">MDX FWD</option>
      <option value="MDX-SH-AWD"            class="2016 acura">MDX SH-AWD</option>
      <option value="RDX-AWD"               class="2016 acura">RDX AWD</option>
      <option value="RDX-FWD"               class="2016 acura">RDX FWD</option>
      <option value="RLX-FWD"               class="2016 acura">RLX FWD</option>
      <option value="RLX-SH-AWD"            class="2016 acura">RLX SH-AWD</option>
      <option value="TLX"                   class="2016 acura">TLX</option>

      <option value="GTV"                   class="1974 alfa-romeo">GTV</option>
      <option value="Spider"                class="1974 alfa-romeo">Spider</option>
      <option value="GTV"                   class="1973 alfa-romeo">GTV</option>
      <option value="Spider"                class="1973 alfa-romeo">Spider</option>
    </select>

    <select id="type" name="type" required>
      <option value="">I'm Shopping For</option>
      <option value="wheels">Wheels</option>
      <option value="tires">Tires</option>
    </select>
    <input type="submit" id="w-search-btn" value="View Results">
  </form>

＆＃13;

到目前为止一切正常。唯一的问题是PC上的页面加载速度很慢。在手机和平板电脑上，它非常慢。它加载速度慢的原因是因为我在#model选择下拉列表中有6000条记录（我在上面的示例中只使用了少量记录）。

考虑到页面加载时禁用#model选择下拉列表，为什么它仍然会很慢，并且只有在选择了make和year后才能使用。这些6000条记录也不会同时显示出来。根据您在Make和Year中选择的内容，相对记录将显示在#model下拉列表中。那么，为什么页面加载速度如此之慢？有办法解决吗？

Answer 1

您可以尝试使用＆＃34;远程版本＆＃34;他们在http://www.appelsiini.net/projects/chained上进行了描述，以便初始页面加载量不会太大，并且您点击了api来获取记录。因此，您需要为make / year / model / tires创建一些端点，脚本可以从中获取这些端点并将插件指向它们。

如果您在使用http://www.tirerack.com/上的控件时观看开发人员工具的网络标签，您会发现这是他们本质上所做的事情，在此过程的每一步都会点击他们的api。

如果它被禁用，有没有办法不呈现选择下拉值？

1 个答案: