Dropdown loses selection after page reload

programming web dev
1

When either US or Canada are selected from country drop-down menu, the states/provinces drop-down menu appears. But when the form is submitted and the page reloaded (by using the browser back button), the state drop-down has lost its selection (but the country drop-down still maintains its selection). Can anyone tell me why?

Here’s what the JavaScript looks like:


<script language="JavaScript" type='text/javascript'>
this.addEventListener("load", selectCountry, true);
this.addEventListener("load", reloadState, true);
function reloadState() {
// On page reload, If US or Canada already selected, then show state dropdown *** NOT WORKING IN IE
  if(document.getElementById('country').value == "United States" || document.getElementById('country').value == "Canada"){
       // Turn on visibility of state dropdown
       document.getElementById('div-state').style.display = '';
       document.getElementById('div-state').style.visibility = '';
  } else {
       document.getElementById('div-state').style.display = 'none';
       document.getElementById('div-state').style.visibility = 'hidden';
  }
}
function selectCountry(elem){
  if(elem.value == "United States" || elem.value == "Canada"){
      // Turn on visibility of state dropdown
      document.getElementById('div-state').style.display = '';
      document.getElementById('div-state').style.visibility = '';
      /* state was made a required field, but when display is off, jQuery will ignore this rule */
      return false;
  }
  else{
      document.getElementById('div-state').style.display = 'none';
      document.getElementById('div-state').style.visibility = 'hidden';
      // Erase any existing value for state
      document.getElementById('state').value = '';
      return true;
  }
}
</script>

The functions are called like this in the form:


<select tabindex="6" name="state" id="state" onchange="selectState(state);">
 <select tabindex="7" name="country" id="country" onchange="selectCountry(country);">

Note: in IE, the state drop-down disappears completely after page reload, so the function that is supposed to reset CSS display of the state drop-down is not working at all in that browser.