Javascript：根據下拉列表選擇顯示/隱藏div

Question

以下是我具有的下拉列表的HTML代碼。 選擇American選項后， <head>下的American（）Javascript函數必須顯示另一個div。 但是，這不會發生。

Javascript：

<script type="text/javascript">
    function American(){
        <!-- Getting the Canadian -> Hiding it -> Turning 'on' the American. -->
        var Canadian = document.getElementById('text-inputs-Canadian');
        Canadian.style.display = 'none';

        var American = document.getElementById('text-inputs-American');
        American.style.display = 'block';
    }
</script>

下拉列表：

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
        <span>Standard</span>
        <ul class="dropdown">
                <li><a href="#" onclick="American();">American</a></li>
            <li><a href="#">Canadian</a></li>
        </ul>
</div>

承擔#text-inputs-American的div最初設置為隱藏，如下所示：

#text-inputs-American{
    top:10px;
    margin-right:-200px;
    float:right;
    position:relative;
    display:none; /*Hides the input parameters until toggled by JS script*/
}

關於我可能做錯了什么的任何想法？

編輯：請求的代碼，必須被“顯示”的div

                <div id="text-inputs-American">
                            <span id="text-labels">S<sub>s</sub>(g)</span>
                            <input type="number" step="any" />
                            <span id="text-labels">S<sub>1</sub>(g)</span>
                            <input type="number" step="any" />
                            <span id="text-labels">T<sub>0</sub>(g)</span>
                            <input type="number" step="any" />
                            <span id="text-labels">T<sub>L</sub>(g)</span>
                            <input type="number" step="any" />
                </div>

Answer 1

div到底有什么ID？ 我認為您混淆了如何使用getElementById方法：

嘗試這個：

 var Canadian = document.getElementById('text-inputs-Canadian');
 Canadian.style.display = 'none';

 var American = document.getElementById('text-inputs-American');
 American.style.display = 'block';

不要在getElementById方法上放置“＃”字符來獲取“文本輸入對象”。

Answer 2

如果您熟悉JQuery，那么編寫腳本會使您的生活更加輕松

只需編寫一行代碼即可完成：

$（'＃IdofTheDiv'）。show（）; //用於顯示div http://api.jquery.com/show/ $（'＃IdofTheDiv'）。hide（）; //用於隱藏div http： //api.jquery.com/hide/

此外，您甚至可以使用JQuery為div隱藏/顯示添加動畫。

Javascript：根據下拉列表選擇顯示/隱藏div

問題描述

2 個解決方案

解決方案1
2 已采納 2013-05-16 17:37:17

解決方案2
1 2013-05-16 17:37:41

Javascript：根據下拉列表選擇顯示/隱藏div

問題描述

2 個解決方案

解決方案1 2 已采納 2013-05-16 17:37:17

解決方案2 1 2013-05-16 17:37:41

解決方案1
2 已采納 2013-05-16 17:37:17

解決方案2
1 2013-05-16 17:37:41