force Select option to default on page load

Question

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.

CSS :

#div1,#div2,#div3 {
  display: none
}

JS :

function showHide(elem) {
  if(elem.selectedIndex != 0) {
    //hide the divs
    for(var i=0; i < 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');
}

HTML :

<form action="#" method="post" id="frmMyform">

<select name="selMyList" onchange="showHide(this)">
    <option value="">Select an option</option>
    <option value="1">Show div 1</option>
    <option value="2">Show div 2</option>
    <option value="3">Show div 3</option>
</select>

<div id="div1">This is Div 1</div>
<div id="div2">This is Div 2</div>
<div id="div3">This is Div 3</div>

</form>

I tried setting #div0 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.

Any ideas?

Answer 1

Try to use selected attribute for option tag :

<select name="selMyList" onchange="showHide(this)">
    <option value="" selected="selected">Select an option</option>
    <option value="1">Show div 1</option>
    <option value="2">Show div 2</option>
    <option value="3">Show div 3</option>
</select>