javascript - 浏览器后退按钮否定由 javascript 完成的 CSS 更改

Question

我正在尝试创建一个基于先前选择列表显示不同选择列表的表单。

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 框，这样它就不会重置

Answer 1

您可以在窗口的 load 事件中读取恢复的选择。

由于您已经有一个根据当前选择更新页面的函数，最简单的解决方案是在页面加载时运行它:

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