多選會話存儲

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

嘗試添加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);

});