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

Question

好吧,我一直在寻找答案,这样一段时间,但一切我遇到(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书!)

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

Answer 2

尝试处理更改事件select并使用this.value以确定它是否为"是".

的jsfiddle

JS

document.getElementById('test').addEventListener('change', function () {
    var style = this.value == 1 ? 'block' : 'none';
    document.getElementById('hidden_div').style.display = style;
});

HTML

<select id="test" name="form_select">
   <option value="0">No</option>
   <option value ="1">Yes</option>
</select>

<div id="hidden_div" style="display: none;">Hello hidden content</div>

Answer 3

我认为这是合适的:

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

<script type="text/javascript">
function showDiv(select){
   if(select.value==1){
    document.getElementById('hidden_div').style.display = "block";
   } else{
    document.getElementById('hidden_div').style.display = "none";
   }
} 
</script>

试试这个,它会完美的工作.谢谢