title: force Select option to default on page load
body: <p>I have a select box that uses JS to hide/show divs based on selection. The challenge I have is that when the page is reloaded it defaults to the last selection (and no associated div) rather than the default.</p>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>#div1,#div2,#div3 {
    display: none
  }
  </code></pre>
  
  <p><strong>JS</strong>:</p>
  
  <pre><code>function showHide(elem) {
    if(elem.selectedIndex != 0) {
      //hide the divs
      for(var i=0; i &lt; divsO.length; i++) {
        divsO[i].style.display = 'none';
      }
      //unhide the selected div
      document.getElementById('div'+elem.value).style.display = 'block';
    }
  }
  
  window.onload=function() {
    //get the divs to show/hide
    divsO = document.getElementById("frmMyform").getElementsByTagName('div');
  }
  </code></pre>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;form action="#" method="post" id="frmMyform"&gt;
  
  &lt;select name="selMyList" onchange="showHide(this)"&gt;
      &lt;option value=""&gt;Select an option&lt;/option&gt;
      &lt;option value="1"&gt;Show div 1&lt;/option&gt;
      &lt;option value="2"&gt;Show div 2&lt;/option&gt;
      &lt;option value="3"&gt;Show div 3&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="div1"&gt;This is Div 1&lt;/div&gt;
  &lt;div id="div2"&gt;This is Div 2&lt;/div&gt;
  &lt;div id="div3"&gt;This is Div 3&lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>I tried setting <code>#div0</code> to hidden and then adding it to the list of divs but it does'nt seem to work. Also tried using jquery but this is a WordPress site and one of the plugin's interferes with this functionality. This is very close to working perfectly, but just need to resolve this weirdness. </p>
  
  <p>Any ideas?</p>