当选择选择选项时，javascript显示隐藏的div

小编典典

当选择选择选项时，javascript显示隐藏的div

html

好的，一段时间以来，我一直在寻找答案，但我遇到的所有问题（甚至在搜索javascript时）都与jQuery结合在一起！没人再使用普通的javascript吗？！？

因此，我想要一个下拉列表（使用多个选项进行选择）。选择某个选项后，我希望显示一个隐藏的div。

<select id="test" name="form_select">
   <option value="0">No</option>
   <option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>

然后，我尝试使用以下JavaScript代码：

function showDiv(){
   document.getElementById('hidden_div').style.display = "block";
}

我猜我的问题出在选项中的onClick触发器上，但是我不确定还有什么用？或者，我可能会完全不喜欢这一本书（请注意，自己会获得一本不错的JavaScript书！）

阅读 299

2020-05-10

共1个答案

小编典典

尝试这个：

function showDiv(divId, element)

{

    document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';

}


#hidden_div {

    display: none;

}


<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">

   <option value="0">No</option>

   <option value="1">Yes</option>

</select>

<div id="hidden_div">This is a hidden div</div>

2020-05-10