force在页面加载时选择默认选项

时间:2014-04-10 12:30:14

标签: javascript select

我有一个选择框,使用JS根据选择隐藏/显示div。我遇到的挑战是,当重新加载页面时,它默认为最后一个选择(并且没有关联的div)而不是默认值。

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>

我尝试将#div0设置为隐藏,然后将其添加到div列表中,但它似乎无法正常工作。还尝试使用jquery,但这是一个WordPress网站,其中一个插件干扰了这个功能。这非常接近完美的工作,但只需要解决这个奇怪的问题。

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

尝试将selected属性用于选项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>