本文介绍了选择选择选项后,如何显示隐藏的div?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用纯JavaScript.我有一个下拉列表(<select>
,其中有许多<option>
).选择某个选项后,我希望显示一个隐藏的div.
I want to use plain JavaScript. I have a drop down list (<select>
with a number of <option>
s). When a certain option is selected I want a hidden div to display.
<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代码进行尝试:
Then I'm trying it with this vanilla JavaScript code:
function showDiv(){
document.getElementById('hidden_div').style.display = "block";
}
我猜我的问题出在选项中的onClick触发器上,但是我不确定还有什么用?
I'm guessing my problem is with the onClick trigger in my options but I'm unsure on what else to use?
推荐答案
尝试一下:
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>
这篇关于选择选择选项后,如何显示隐藏的div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!