选择选择选项时如何显示隐藏的 div? [英] How can I show a hidden div when a select option is selected?

问题描述

我想使用纯 JavaScript.我有一个下拉列表(<select> 有许多 <option>s).选择某种选项时，我希望隐藏的div显示.

然后我用这个香草 JavaScript 代码尝试它:
函数 showDiv(){document.getElementById('hidden_​​div').style.display = "block";}
我猜我的问题是我的选项中的 onClick 触发器，但我不确定还可以使用什么?
解决方案
试试这个:
function showDiv(divId, element){document.getElementById(divId).style.display = element.value == 1 ?块":无"；}
#hidden_​​div {显示:无；}
<select id="test" name="form_select" onchange="showDiv('hidden_​​div', this)"><option value="0">否</option><option value="1">是</option></选择><div id="hidden_​​div">这是一个隐藏的div</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>
Then I'm trying it with this vanilla JavaScript code:
function showDiv(){
   document.getElementById('hidden_div').style.display = "block";
}
I'm guessing my problem is with the onClick trigger in my options but I'm unsure on what else to use?
解决方案
try this:



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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    
                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                
                
            

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.