多选会话存储

Question

I have a list of six dropdowns each dependent on the prior selection that then pulls from txt files on the server.

The issue I am having is with the session storage. I do not want to "get" the storage unless all items have been set. Which seems to work this way, however it is still pulling the first "model" select. How can I change this so that it will only populate ALL of the select boxes if all selects have been chosen. Or so at least the Model will not display as it is now?

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

Try adding name attribute to select elements corresponding to name of sessionStorage item to set, using $(document).change() to check if all select elements have been selected at least once

$(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);

});