Question

我是Javascript的新手。我有一个程序，我正在写一个有形式的类。如果单击两个单选按钮中的一个，我需要一个下拉菜单显示一年中的几个月。我尝试了几种不同的方法，但我似乎无法弄明白。此外，我需要为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 个答案: