選擇單選按鈕時顯示/隱藏下拉菜單

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