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

Question

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

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

这是我的设置。

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

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

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

考虑到#model select下拉列表在页面加载时被禁用，并且只有在您选择品牌和年份后才能启用，为什么它仍然很慢。此外，这6000条记录也不会同时出现。根据您在品牌和年份中选择的内容，相关记录将显示在#型号下拉列表中。那么，为什么页面加载如此缓慢呢？有办法解决它吗？

Answer 1

您可以尝试使用上面描述的"远程版本"http://www.appelsiini.net/projects/chained这样初始页面加载就不会那么重，并且您可以使用api来获取记录。因此，您需要为make/year/model/tires创建几个端点，脚本可以从这些端点获取插件并将其指向它们。

如果您在使用上的控件时观看开发人员工具的"网络"选项卡http://www.tirerack.com/，你会看到这就是他们本质上所做的，在这个过程中的每一步都使用他们的api。