浏览器后退按钮否定了由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更改

回答

相关问题