选择单选按钮时显示/隐藏下拉菜单

Question

I am completely new to Javascript. 我对Java完全陌生。 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. 另外，我将需要为6个字段执行此操作。 So will I need more than one function or can I use the same one? 因此，我需要多个功能还是可以使用同一功能？

Answer 1

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中使用它来使用相同的函数。

Answer 2

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. 将此代码放在HTML文件的标题中。 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. 您可以使用适合您的任何功能。

<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. 您可以选择使用setVisible或setDisplay函数。 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. 另外，您可能需要考虑将其他甚至侦听器添加到单选按钮上，例如onchange，因为用户无需单击鼠标即可选中单选按钮。 They can use the keyboard to select it as well which would not fire the onclick event. 他们也可以使用键盘来选择它，这不会触发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>

Answer 3

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>

选择单选按钮时显示/隐藏下拉菜单

问题描述

3 个解决方案

解决方案1
5 2011-07-27 16:22:56

解决方案2
0 2011-07-27 16:28:40

解决方案3
0 2011-07-27 16:35:06

选择单选按钮时显示/隐藏下拉菜单

问题描述

3 个解决方案

解决方案1 5 2011-07-27 16:22:56

解决方案2 0 2011-07-27 16:28:40

解决方案3 0 2011-07-27 16:35:06

解决方案1
5 2011-07-27 16:22:56

解决方案2
0 2011-07-27 16:28:40

解决方案3
0 2011-07-27 16:35:06