# Dropdown loses selection after page reload

**URL:** https://forum.kirupa.com/t/dropdown-loses-selection-after-page-reload/326051
**Category:** web dev
**Created:** [November 20, 2011, 6:23am UTC](https://forum.kirupa.com/t/dropdown-loses-selection-after-page-reload/326051 "2011-11-20T06:23:24Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Pherank](https://avatars.discourse-cdn.com/v4/letter/p/4af34b/32.png) [@Pherank](https://forum.kirupa.com/u/Pherank)
#### Post date: [November 20, 2011, 6:23am UTC](https://forum.kirupa.com/t/dropdown-loses-selection-after-page-reload/326051/1 "2011-11-20T06:23:24Z")

</div>

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:

```auto

<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:

```auto

<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.