無効になっている場合に選択ドロップダウン値を表示しない方法はありますか？

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ドロップダウンリストに6000個のレコードがあるからです（私は上記の例ではほんの少ししか使用していません）。

#modelの選択ドロップダウンがページの読み込み時に無効になっていて、makeとyearを選択すると、それはまだゆっくりだと思います。また、それらの6000のレコードは一度にすべて表示されません。 [Make and Year]で選択した内容に応じて、相対レコードが#modelドロップダウンに表示されます。もう一度、なぜページの読み込みが遅いのですか？それを修正する方法はありますか？

Answer 1

http://www.appelsiini.net/projects/chainedに記載されている「リモートバージョン」を使用すると、最初のページの負荷がそれほど重くないため、APIを使用してレコードを取得できます。だから、スクリプトが取り出せるメイク/年/モデル/タイヤ用のいくつかのエンドポイントを作成して、そこにプラグインをポイントする必要があります。

http://www.tirerack.com/のコントロールを使用しているときに開発者ツールのネットワークタブを見ると、これはプロセスの各ステップでAPIに当たるということです。