瀏覽器後退按鈕否定了由javascript完成的CSS更改

我正嘗試創建一個基於前一個選擇列表顯示不同選擇列表的表單。瀏覽器後退按鈕否定了由javascript完成的CSS更改

HTML

<select name="college" id="college" onchange="show_majors()"> 
       <!-- <option value="-">-</option> --> 
       <option value="COE">College of Engineering</option> 
       <option value="CBE">College of Business and Economics</option> 
       <option value="CS">College of Science</option> 
       <option value="CHSS">College of Humanities and Social Sciences</option> 
       <option value="CIT">College of Information Technology</option> 
       <option value="CEDU">College of Education</option> 
       <option value="CL">College of Law</option> 
       <option value="CFA">College of Food and Agriculture</option> 
</select> 

     <div id="COE_MAJORS" class="majors"> 
      <p><strong>Major:</strong></p> 
       <select name="COE_major" id="COE_major" onchange="show_clusters()"> 
        <option value="OTHER">-</option> 
       </select> 
     </div> 
     <div id="CBE_MAJORS" class="majors"> 
      <p><strong>Major:</strong></p> 
       <select name="CBE_major" id="CBE_major" onchange="show_clusters()"> 
        <option value="OTHER">-</option> 
       </select> 
     </div> 
     .....

CSS

.majors { 
    height: 0px; 
    overflow: hidden; 
}

的Javascript

<script type="text/javascript"> 
      function show_majors() { 
       var college = document.getElementById("college"); 
       college = college[college.selectedIndex].value; 
       var majors = document.getElementsByClassName("majors"); 
       for(var i = 0; i < majors.length ; i++) { 
        majors[i].style.height = "0px"; 
       } 
       if (college != "-") { 
        document.getElementById(college + "_MAJORS").style.height = "auto"; 
       } 
      } 
</script>

現在的問題是選擇一所大學，然後一個重大按下提交按鈕（這重定向到另一個頁面後）。當我按下瀏覽器的後退按鈕時，最後選擇的大學仍然被選中，但專業DIV框被重置爲0高度。如何在用戶按下後退按鈕時顯示該相應大學的主要div框，以便它不會重置

來源

2016-08-12 Bilal Hejase

您可以在狀態存儲在cookie或本地存儲和基於它恢復它。 –

您可以在窗口的load事件中讀取恢復的選擇。

既然你已經有一個基於當前選擇的是更新頁面的功能，最簡單的辦法就是運行它時，頁面加載：

<script> 
addEventListener('load', show_majors); 
</script>

來源

2016-08-12 23:25:37

瀏覽器後退按鈕否定了由javascript完成的CSS更改

回答

相關問題