I'm currently working on a form that changes the displayed select lists based on the selection of a previous list.
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>
The issue arises when a user selects a college and major, then clicks submit (which leads to another page). Upon returning with the back button, the last selected college remains but the majors DIV box is reset. Is there a way to display the corresponding major div box for the college selected when the user returns using the back button, preventing it from resetting?