选择选择选项时如何显示隐藏的 div?

问题描述

我想使用纯 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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！


上一篇：在 jQuery 中如何处理 oncut、oncopy 和 onpaste? 
下一篇：捕获点击围绕 iframe 的 div 

 
相关文章
在 Angular 2/Typescript 中使用 IScrollUse IScroll in Angular 2 / Typescript(在 Angular 2/Typescript 中使用 IScroll)
Anime.js 在 Ionic 3 项目中不起作用anime.js not working in Ionic 3 project(Anime.js 在 Ionic 3 项目中不起作用)
Ionic 3 - 使用异步数据更新 ObservableIonic 3 - Update Observable with Asynchronous Data(Ionic 3 - 使用异步数据更新 Observable)
Angular 2:在本地 .json 文件中找不到文件Angular 2: file not found on local .json file(Angular 2:在本地 .json 文件中找不到文件)
在 Ionic 2 中，如何创建使用 Ionic 组件的自定义指In Ionic 2, how do I create a custom directive that uses Ionic components?(在 Ionic 2 中，如何创建使用 Ionic 组件的自定义指令?)
将 ViewChild 用于动态元素 - Angular 2 &amp;离子2Use ViewChild for dynamic elements - Angular 2 amp; ionic 2(将 ViewChild 用于动态元素 - Angular 2 amp;离子2)



最新文章

处理 js 中的 URL 锚点更改事件
检测到双击事件时需要取消单击/鼠标事件
替代支持 eventData 的 jQuery 的 .toggle() 方法?
如何删除带有匿名函数的 addEventListener 的EventLi
DOM 事件优先级
带参数的 Javascript 事件处理程序
jQuery 复选框选中状态更改事件
当元素添加到页面时如何通知我?
jQuery复选框更改和单击事件
什么时候应该使用 jQuery 的 document.ready 函数?


<i id='RGkDb'><tr id='RGkDb'><dt id='RGkDb'><q id='RGkDb'><span id='RGkDb'><b id='RGkDb'><form id='RGkDb'><ins id='RGkDb'></ins><ul id='RGkDb'></ul><sub id='RGkDb'></sub></form><legend id='RGkDb'></legend><bdo id='RGkDb'><pre id='RGkDb'><center id='RGkDb'></center></pre></bdo></b><th id='RGkDb'></th></span></q></dt></tr></i><div id='RGkDb'><tfoot id='RGkDb'></tfoot><dl id='RGkDb'><fieldset id='RGkDb'></fieldset></dl></div>
<tfoot id='RGkDb'></tfoot>
<legend id='RGkDb'><style id='RGkDb'><dir id='RGkDb'><q id='RGkDb'></q></dir></style></legend>
<tbody id='RGkDb'></tbody>
<small id='RGkDb'></small><noframes id='RGkDb'>
<bdo id='RGkDb'></bdo><ul id='RGkDb'></ul>