有沒有辦法不呈現選擇下拉值，如果它被禁用？

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。