多选会话存储

Question

我有一个包含六个下拉列表的列表，每个下拉列表取决于先前的 selection，然后从服务器上的 txt 文件中提取。

我遇到的问题是会话存储。除非所有项目都已设置，否则我不想 "get" 存储。这似乎以这种方式工作，但它仍在拉动第一个 "model" select。我该如何更改它，以便它仅在所有 select 已被选中时填充所有 select 框。或者至少模型不会像现在这样显示？

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

尝试将 name 属性添加到 select 元素对应的 sessionStorage 项的名称来设置，使用 $(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);

});

多选会话存储

Session Storage on Multiple selects

html

javascript

jquery

session-storage