javascript 选择单选按钮时显示/隐藏下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6847745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide drop down when radio button is selected
提问by Emily
I am completely new to Javascript. I have a program I am writing for a class which has a form. I need a drop down menu to appear with the months of the year in it if one of the two radio buttons is clicked. I have tried several different ways but I can't seem to figure it out. Also, I will need to do this for like 6 of the fields. So will I need more than one function or can I use the same one?
我对 Javascript 完全陌生。我有一个程序，我正在为一个有表单的类编写程序。如果单击两个单选按钮之一，我需要一个下拉菜单来显示一年中的月份。我尝试了几种不同的方法，但似乎无法弄清楚。另外，我需要为其中的 6 个字段执行此操作。那么我需要多个功能还是可以使用相同的功能？
回答by Vinay
Try this:
试试这个：
<script type="text/javascript">
function ChangeDropdowns(value){
if(value=="radiobuttonYes"){
document.getElementById('ddlId').style.display='none';
}else if(value=="radiobuttonNo"){
document.getElementById('ddlId').style.display='block';
}
}
</script>
If all the fields depend on the same radio button value, you can use the same function by passing the clientId as parameter and using it in getElementById.
如果所有字段都依赖于相同的单选按钮值，则可以通过将 clientId 作为参数传递并在 getElementById 中使用它来使用相同的功能。
回答by James
If you assign an id to each element you'd like to show/hide then you can use JavaScript and CSS to show or hide those elements of the page.
如果您为要显示/隐藏的每个元素分配一个 id，那么您可以使用 JavaScript 和 CSS 来显示或隐藏页面的这些元素。
Put this code in your header of the HTML file. Note that display affects layout, essentially removing the space the element takes up on the page. Visibility preserves layout, hiding the element but keeping it's space available. You can use whichever function suits you.
将此代码放在 HTML 文件的标题中。请注意，显示会影响布局，实质上是删除元素在页面上占用的空间。可见性保留布局，隐藏元素但保持其可用空间。您可以使用适合您的任何功能。
<script language="javascript" type="text/javascript">
function setVisible(id, visible) {
var o = document.getElementById(id); //get the element based on it's id
//if the element exists then set it's visiblity
if (typeof(o) != 'undefined') o.style.visibility = visible ? 'visible' : 'hidden';
if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}
function setDisplay(id, visible) {
var o = document.getElementById(id);
if (typeof(o) != 'undefined') o.style.display = visible ? 'block' : 'none';
if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}
</script>
Here is an example of what should be in the body. You can choose to use the setVisible or setDisplay function. Also, you may want to consider adding other even listeners to the radio buttons such as onchange because the user doesn't need to mouse click a radio button to check it. They can use the keyboard to select it as well which would not fire the onclick event.
这是身体中应该有什么的一个例子。您可以选择使用 setVisible 或 setDisplay 函数。此外，您可能需要考虑向单选按钮添加其他偶数侦听器，例如 onchange，因为用户不需要鼠标单击单选按钮来检查它。他们也可以使用键盘来选择它，这不会触发 onclick 事件。
<div>
Radio:
<input type='radio' name='myradio' value='first' onclick="setVisible('Div1', true); setVisible('Div2', false);" />
<input type='radio' name='myradio' value='second' onclick="setVisible('Div2', true); setVisible('Div1', false);" />
</div>
<div id='Div1'>
More form fields here.
</div>
<div id='Div2'>
More form fields here.
</div>
Here is my full code example:
这是我的完整代码示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function setVisible(id, visible) {
var o = document.getElementById(id);
if (typeof(o) != 'undefined') o.style.visibility = visible ? 'visible' : 'hidden';
if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}
function setDisplay(id, visible) {
var o = document.getElementById(id);
if (typeof(o) != 'undefined') o.style.display = visible ? 'block' : 'none';
if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}
</script>
</head>
<body>
<div>
Radio:
<input type='radio' name='myradio' value='first' onclick="setVisible('Div1', true); setVisible('Div2', false);" />
<input type='radio' name='myradio' value='second' onclick="setVisible('Div2', true); setVisible('Div1', false);" />
</div>
<div id='Div1'>
More form fields here. 1
</div>
<div id='Div2'>
More form fields here. 2
</div>
</body>
</html>
回答by Josh - TechToolbox
Looks like they beat me to it. But, here's another example.
看起来他们打败了我。但是，这是另一个例子。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>radio example</title>
<style type="text/css">
.show { display: block; }
.hide { display: none; }
</style>
<script type="text/javascript">
function showSelect() {
var select = document.getElementById('my_select');
select.className = 'show';
}
</script>
</head>
<body>
<form action="#" method="post">
<label for="my_radio">Click me</label>
<input id="my_radio" type="radio" name="options" value="some_value" onclick="showSelect();" />
<select id="my_select" class="hide">
<option value="someValue">Some Text</option>
</select>
</form>
</body>
</html>
