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>

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

1 个答案: