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

Question

我对Java完全陌生。 我有一个正在编写的具有某种形式的课程的程序。 如果单击两个单选按钮之一，则需要一个下拉菜单来显示一年中的月份。 我尝试了几种不同的方法，但似乎无法弄清楚。 另外，我将需要为6个字段执行此操作。 因此，我需要多个功能还是可以使用同一功能？

Answer 1

尝试这个：

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

如果所有字段都依赖于相同的单选按钮值，则可以通过将clientId作为参数传递并在getElementById中使用它来使用相同的函数。

Answer 2

如果为要显示/隐藏的每个元素分配一个ID，则可以使用JavaScript和CSS来显示或隐藏页面的那些元素。

将此代码放在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>

这是应该在体内的一个例子。 您可以选择使用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>

这是我的完整代码示例：

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

看起来他们击败了我。 但是，这是另一个例子。

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