多個選擇的會話存儲

Question

我有一個六個下拉列表，每個下拉列表都依賴於之前的選擇，然後從服務器上的txt文件拉取。

我遇到的問題是會話存儲。除非已設置所有項目，否則我不想「獲取」存儲空間。這似乎以這種方式工作，但它仍然拉動第一個「模型」選擇。如何更改此選項，以便只有在選擇了所有選擇項的情況下才會填充所有選擇框。或者至少模型不會像現在這樣顯示？

HTML：

<div id="shop_vehicle_container"> 
     <div class="sel_container"> 
      <div class="sel_label"> 
<div id="first-half"> 
       <p class="step1-text">Step 1: Select Your Vehicle</p> 
      </div> 
       <p class="step1-text">Step 2: Select Parts Diagram</p> 
      </div>--> 
<div id="car-select"> 
      <select id="vehic_sel_model"> 
       <option value="">Model</option> 
       <option value='Accord'>Accord</option> 
       <option value="AccordCrosstour">Accord Crosstour</option> 
       <option value="Civic">Civic</option> 
       <option value="CivicdelSol">Civic del Sol</option> 
       <option value='CR-V'>CR-V</option> 
       <option value="CRX">CRX</option> 
       <option value="CR-Z">CR-Z</option> 
       <option value="Crosstour">Crosstour</option> 
       <option value="Element">Element</option> 
       <option value="Fit">Fit</option> 
       <option value="Insight">Insight</option> 
       <option value="Odyssey">Odyssey</option> 
       <option value="Passport">Passport</option> 
       <option value="Pilot">Pilot</option> 
       <option value="Prelude">Prelude</option> 
       <option value="Ridgeline">Ridgeline</option> 
       <option value="S2000">S2000</option> 
       </select> 
      <select id="vehic_sel_year"> 
       <option value="">Year</option> 
       </select> 
      <select id="vehic_sel_trim"> 
       <option value="">Trim Level</option> 
       </select> 
      </div> 
</div> 
<div id="second-half"> 
<div id="diagram-select"> 
       Step 2: Select Parts Diagram 
      </div> 
<div id="parts-select"> 
      <select id="vehic_sel_section"> 
       <option value="">Section</option> 
      </select> 
      <select id="vehic_sel_group"> 
       <option value="">Group</option> 
      </select> 
      <select id="vehic_sel_subgroup" onchange="if (this.value) window.location.href=this.value"> 
       <option value="">SubGroup</option> 
      </select> 
     <div id="HideButton" class="button-div" style="display:none"> 
      <button class="MySelect" onclick="document.location.href =document.getElementById('vehic_sel_subgroup').value;" />My selection</button> 
     </div> 
</div> 
     </div> 
     </div> 
    </div> 

的Javascript：

$(function() { 
     $('#vehic_sel_model').change(function() { 
      sessionStorage.setItem('model', this.value); 

     }); 

     $('#vehic_sel_year').change(function() { 
      sessionStorage.setItem('year', this.value); 

     }); 

     $('#vehic_sel_trim').change(function() { 
      sessionStorage.setItem('trim', this.value); 

     }); 

     $('#vehic_sel_section').change(function() { 
      sessionStorage.setItem('section', this.value); 

     }); 

     $('#vehic_sel_group').change(function() { 
      sessionStorage.setItem('group', this.value); 

     }); 
     $('#vehic_sel_subgroup').change(function() { 
      sessionStorage.setItem('subgroup', this.value); 

     }); 


     if(sessionStorage.getItem('subgroup')){ 
      $('#vehic_sel_model').val(sessionStorage.getItem('model')); 
      $("#vehic_sel_year").load("/v/vehicle-selection/cache/" + sessionStorage.getItem('model') + ".txt", function(){ 
       $('#vehic_sel_year').val(sessionStorage.getItem('year')); 
     }); 
      $("#vehic_sel_trim").load("/v/vehicle-selection/cache/" + sessionStorage.getItem('year') + ".txt", function(){ 
       $('#vehic_sel_trim').val(sessionStorage.getItem('trim')); 
     }); 
      $("#vehic_sel_section").load("/v/vehicle-selection/cache/" + sessionStorage.getItem('trim') + ".txt", function(){ 
       $('#vehic_sel_section').val(sessionStorage.getItem('section')); 
     }); 
      $("#vehic_sel_group").load("/v/vehicle-selection/cache/" + sessionStorage.getItem('section') + ".txt", function(){ 
       $('#vehic_sel_group').val(sessionStorage.getItem('group')); 
     }); 
      $("#vehic_sel_subgroup").load("/v/vehicle-selection/cache/" + sessionStorage.getItem('group') + ".txt", function(){ 
       $('#vehic_sel_subgroup').val(sessionStorage.getItem('subgroup')); 
        $("#HideButton").removeAttr("style"); 
     }); 
     } 
    }); 

Answer 1

嘗試增加對應sessionStorage項目來設置的名稱name屬性select元素，運用$(document).change()如果所有select元素都在被選擇的檢查至少一次

$(function() { 

    var arr = [], selects = $("[id^=vehic]"), 
    handleSelect = function() { 
     if (arr.indexOf(this.id) === -1) { 
     arr.push(this.id) 
     };         
    }; 

    $(document).change(function() { 
    if (arr.length === selects.length) { 
     selects.each(function(i, el) { 
     sessionStorage.setItem(this.name, this.value); 
     $(this).load("/v/vehicle-selection/cache/" 
      + sessionStorage.getItem(this.name) + ".txt", function() { 
      $(this).val(sessionStorage.getItem(this.name)); 
     } 
     }); 
     $("#HideButton").removeAttr("style"); 
    }   
    }); 

    selects.change(handleSelect); 

});