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

Question

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

我在Shopify平台上在tirerack.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下拉菜单在页面加载时处于禁用状态，为什么它仍然很慢，只有在您选择make和year后才能启用。这些6000条记录也不会一次显示出来。根据您在Make和Year中选择的内容，相关记录将显示在#model下拉菜单中。那么，为什么页面加载速度如此之慢呢？有没有办法解决它？

Answer 1

您可以尝试使用他们在http://www.appelsiini.net/projects/chained上描述的“远程版本”，以便初始页面加载不会过于沉重，并且您打开api获取记录。因此，您需要为脚本可以获取的make/year/model/tyres创建几个端点，并将插件指向它们。

如果您在使用http://www.tirerack.com/上的控件时观察开发人员工具的网络选项卡，则会发现这是他们本质上的做法，在进程中的每一步都会触发它们的api。