Question

我有一个选择框，使用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网站，其中一个插件干扰了这个功能。这非常接近完美的工作，但只需要解决这个奇怪的问题。

有什么想法吗？

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

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

1 个答案: